定位
文章目录
1. position 属性
position定位,控制元素在网页中的位置,通过定位,结合盒子模型,可以写出复杂多变的网页布局,
有五个值
- static ,(默认值) 静态定位
- fixed,固定定位
- relative ,相对定位
- absolute ,绝对定位
- sticky ,粘性定位
2. static (默认值)静态定位
HTML 元素默认情况下的定位方式为 static(静态)。 静态定位设置left right top bottom不起作用。
position: static; 的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位。自上而下,自左而右依次排列。坐标系不生效。
3. fixed 固定定位(重点)
position: fixed; 的元素是相对于视口定位的,元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动
元素定位设置为fixed之后,会有如下特性:
-
脱离文档流,因此不占据空间,别的元素感觉不到他的存在,会和其他元素重叠。
-
变成行内块级元素,宽高将自适应
-
坐标系生效,可以设置left right top bottom
-
若不设置left,top,他将停留在本应该出现的位置,别的元素也感觉不到他的存在,会和别的元素叠在一起(建议设置)
-
如果定位元素有margin,则从margin左上角开始计算
例子:
在这个例子中,只有具有 class=“fixed” 的
<div>
元素会固定定位:div.fixed { position: fixed; right: 30px; width: 300px; height: 200px; border: 3px solid darkred; }
注: 元素一旦脱离文档流,将具有如下属性:
- 不在占用正常的文档位置
- 正常布局的元素,将感觉不到他的存在,有可能会发生元素重叠
4. relative ,相对定位(重点)
position: relative; 的元素相对于其正常位置进行定位。 相对元素本身的位置偏移。
元素定位设置为relative之后,会有如下特性:
- 坐标系生效,设置left right top bottom起作用
- 相对位置自己的原本位置
- 不脱离文档流。旧位置继续保留,新位置不占文档流(脱离文档流)。
例子:
div.relative {
position: relative;
width: 300px;
height: 200px;
border: 3px solid darkred;
}
效果图:
在上个代码中添加 top: 100px;使其改变位置
结果显示:
所以看出: 元素定位设置为relative后,旧的位置继续保留,新位置 不占文档流(脱离文档流)
5. absolute ,绝对定位(重点)
position: absolute; 的元素 相对于最近的 有定位的(相对、绝对、固定定位) 祖先元素进行定位。 然而,如果绝对定位的元素没有祖先,它将使用文档主体(body),并随页面滚动一起移动。
元素定位设置为absolute之后,会有如下特性:
- 变成行内块级元素
- 脱离文档流。
- 坐标系生效,设置left right top bottom起作用
- 若不设置left,top,他将停留在本应该出现的位置,别的元素也感觉不到他的存在,会和别的元素叠在一起(建议设置)
- 如果定位元素有margin,则从margin左上角开始计算
例子:
.grandparent {
position: relative;
height: 200px;
width: 200px;
background-color: blue;
}
.parent {
position: absolute;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: yellow;
}
.child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
</div>
结果演示:
绝对定位和相对定位使用
记住 子绝父相 这四个字
即:子元素使用绝对定位,父元素使用相对定位
因为:
父级盒子在布局时需要占有位置(如果不占有位置的话,会影响下面盒子的布局),因此父级元素要使用相对定位;
而子盒子不需要占有位置,可以放在父盒子里面的任何一个地方,不会影响其它的兄弟元素,则使用绝对定位。
使用绝对定位不会占有位置,而使用相对定位会占有位置
6. sticky ,粘性定位
position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为 止,然后将其“粘贴”在适当的位置。
是一个结合relative相对定位和fixed固定定位于一体的特殊定位方式
例子:
在这个例子中 ,绿色的方块可以随着页面滚动,但在到达滚动位置时(距离页面顶部10px时)会停留在那里
div.sticky {
position: sticky;
top: 10px;
background-color: green;
width: 100px;
height: 100px;
}
7 .重叠元素
在对元素进行定位时,它们可以与其他元素重叠。
就会面临谁在上面的问题,设置z-index 属性可以很好的解决这个问题
z-index 属性指定元素的堆栈顺序(哪个元素应放置在其他元素的前面或后面)。
元素可以设置正或负的堆叠顺序。
当元素之间重叠的时候,z-index 较大的元素会覆盖较小的元素在上层进行显示。