定位的知识点_定位的基本语法是什么-程序员宅基地

技术标签： css html css3

定位

含义：

是将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

计算方式：

定位 = 定位模式 + 边偏移

定位模式：用于指定一个元素在文档中的定位方式。
边偏移：则决定该元素的最终位置。

定位模式：

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

值	语义
`static`	静态定位
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位

边偏移：

边偏移就是定位的盒子移动到最终的位置，有top、bottom、left、right四个属性

边偏移属性	示例	描述
`top`	`top：80px`	顶端偏移量，定义元素相对其父元素上边线的距离
`bottom`	`bottom：80px`	底部偏移量，定义元素相对其父元素下边线的距离
`left`	`left：80px`	左侧偏移量，定义元素相对其父元素左侧边线的距离
`right`	`right：80px`	右侧偏移量，定义元素相对其父元素右侧边线的距离

静态定位`static`：

静态定位是元素的默认定位方式，无定位的意思。

语法格式： 选择器{ position：static;}

注意:

静态定位按照标准流特性摆放位置，他没有边偏移
静态定位在布局中很少用到。

相对定位relative：

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

语法格式： 选择器{ position：relative;}

特点：

它是相对自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。

原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对它(不脱标，继续保留原来的位置)。

示例：
在这里插入图片描述

绝对定位`absolute`：

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。

语法格式： 选择器{ position：absolute;}

特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位的祖先元素为参考点移动位置。
绝对定位不在占有原先的位置(脱标)。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .father{
   
    
            width: 50px;
            height: 20px;
            background-color: #00a4ff;
        }
        .son{
   
    
            /*给予一个绝对定位*/
            position: absolute;
            /*绝对定位的边偏移*/
            top: 100px;
            left: 50px;
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>

显示样式：
在这里插入图片描述

固定定位`fixed`:

固定定位时元素固定于浏览器可视区域的位置，主要适用场景：可以在浏览器页面滚动时元素的位置不会发生改变。

语法格式：选择器{ position：fixed;}

特点：

以浏览器的可视窗口为参照物移动元素。
跟父元素没有任何关系。
不随滚动条滚动。
固定定位不在占有原先位置。
固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .son{
     
      
            position: fixed;
            top: 20px;
            left: 50px;
        }
    </style>
</head>
<body>
<div class="son">
    <img src="../../images/妲己.png" alt="#">
</div>
&

本文链接：https://blog.csdn.net/weixin_45839775/article/details/122073308

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

艾美捷Epigentek DNA样品的超声能量处理方案-程序员宅基地

文章浏览阅读15次。空化气泡的大小和相应的空化能量可以通过调整完全标度的振幅水平来操纵和数字控制。通过强调超声技术中的更高通量处理和防止样品污染，Epigentek EpiSonic超声仪可以轻松集成到现有的实验室工作流程中，并且特别适合与表观遗传学和下一代应用的兼容性。Epigentek的EpiSonic已成为一种有效的剪切设备，用于在染色质免疫沉淀技术中制备染色质样品，以及用于下一代测序平台的DNA文库制备。该装置的经济性及其多重样品的能力使其成为每个实验室拥有的经济高效的工具，而不仅仅是核心设施。

11、合宙Air模块Luat开发：通过http协议获取天气信息_合宙获取天气-程序员宅基地

文章浏览阅读4.2k次，点赞3次，收藏14次。目录点击这里查看所有博文本系列博客，理论上适用于合宙的Air202、Air268、Air720x、Air720S以及最近发布的Air720U（我还没拿到样机，应该也能支持）。先不管支不支持，如果你用的是合宙的模块，那都不妨一试，也许会有意外收获。我使用的是Air720SL模块，如果在其他模块上不能用，那就是底层core固件暂时还没有支持，这里的代码是没有问题的。例程仅供参考！..._合宙获取天气

EasyMesh和802.11s对比-程序员宅基地

文章浏览阅读7.7k次，点赞2次，收藏41次。1 关于meshMesh的意思是网状物，以前读书的时候，在自动化领域有传感器自组网，zigbee、蓝牙等无线方式实现各个网络节点消息通信，通过各种算法，保证整个网络中所有节点信息能经过多跳最终传递到目的地，用于数据采集。十多年过去了，在无线路由器领域又把这个mesh概念翻炒了一下，各大品牌都推出了mesh路由器，大多数是3个为一组，实现在面积较大的住宅里，增强wifi覆盖范围，智能在多热点之间切换，提升上网体验。因为节点基本上在3个以内，所以mesh的算法不必太复杂，组网形式比较简单。各厂家都自定义了组_802.11s

线程的几种状态_线程状态-程序员宅基地

文章浏览阅读5.2k次，点赞8次，收藏21次。线程的几种状态_线程状态

stack的常见用法详解_stack函数用法-程序员宅基地

文章浏览阅读4.2w次，点赞124次，收藏688次。stack翻译为栈，是STL中实现的一个后进先出的容器。要使用 stack，应先添加头文件include<stack>，并在头文件下面加上“ using namespacestd;"1. stack的定义其定义的写法和其他STL容器相同, typename可以任意基本数据类型或容器：stack<typename> name;2. stack容器内元素的访问..._stack函数用法

2018.11.16javascript课上随笔（DOM）-程序员宅基地

文章浏览阅读71次。<li> <a href = "“#”>-</a></li><li>子节点：文本节点（回车），元素节点，文本节点。不同节点树：　　节点（各种类型节点）childNodes:返回子节点的所有子节点的集合，包含任何类型、元素节点（元素类型节点）：child。node.getAttribute(at...

随便推点

layui.extend的一点知识第三方模块base 路径_layui extend-程序员宅基地

文章浏览阅读3.4k次。//config的设置是全局的layui.config({ base: '/res/js/' //假设这是你存放拓展模块的根目录}).extend({ //设定模块别名 mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录}); //你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）layui.exten_layui extend

5G云计算：5G网络的分层思想_5g分层结构-程序员宅基地

文章浏览阅读3.2k次，点赞6次，收藏13次。分层思想分层思想分层思想-1分层思想-2分层思想-2OSI七层参考模型物理层和数据链路层物理层数据链路层网络层传输层会话层表示层应用层OSI七层模型的分层结构TCP/IP协议族的组成数据封装过程数据解封装过程PDU设备与层的对应关系各层通信分层思想分层思想-1在现实生活种，我们在喝牛奶时，未必了解他的生产过程，我们所接触的或许只是从超时购买牛奶。分层思想-2平时我们在网络时也未必知道数据的传输过程我们的所考虑的就是可以传就可以，不用管他时怎么传输的分层思想-2将复杂的流程分解为几个功能_5g分层结构