CSS
position
属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left 属性则决定了该元素的最终位置。
定位类型:
举例一个个说明:
html
<div class="grandparent">
<div class="parent">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
</div>
static
该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时
top
,right
,bottom
,left
和z-index
属性无效。
css
.grandparent {
background-color: wheat;
position: static;
width: 500px;
height: 500px;
left: 200px;
top: 100px;
}
.parent {
background-color: green;
width: 250px;
height: 250px;
}
.child {
background-color: red;
width: 100px;
height: 100px;
border: 1px solid #000;
}
relative
该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
将grandparent的position设置为relative,其他保持不变
.grandparent {
position: relative;
// ...
}
// ...
absolute
元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并
修改下样式:
.grandparent {
background-color: wheat;
position: relative;
width: 500px;
height: 500px;
left: 200px;
top: 100px;
}
.parent {
background-color: green;
width: 250px;
height: 250px;
margin-left: 120px;
}
.child {
background-color: red;
width: 100px;
height: 100px;
border: 1px solid #000;
}
.child2 {
position: absolute;
background-color: blue;
top: 120px;
left: 120px;
}
此时child2相对于最近的非 static 定位祖先元素的偏移,来确定元素位置,由于parent祖先元素定位是static,继续往上找,找到grandparent祖先元素发现定位元素不为static,就以它定位。
更准确来说,绝对定位的元素到底是相对父元素的padding、border还是content进行定位?
修改下样式测试下:
.grandparent {
background-color: wheat;
position: relative;
width: 500px;
height: 500px;
left: 200px;
top: 100px;
padding: 50px;
border: 10px solid #000;
}
.parent {
background-color: green;
width: 250px;
height: 250px;
}
.child {
background-color: red;
width: 100px;
height: 100px;
border: 1px solid #000;
}
.child2 {
position: absolute;
background-color: blue;
top: 0;
left: 0;
}
可以看出 定位的元素的起始位置为父包含块的内边距(不会在border里,除非使用负值,会在padding里)
注意:
对于绝对定位的元素:
fixed
元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。
fixed
属性会创建新的层叠上下文。当元素祖先的transform
,perspective
或filter
属性非none
时,容器由视口改为该祖先。
.grandparent {
background-color: wheat;
position: relative;
width: 500px;
height: 500px;
left: 200px;
top: 100px;
}
/* 设置transform */
.parent {
background-color: green;
width: 250px;
height: 250px;
transform: translate(-50%, 10%);
position: fixed;
}
.child {
border: 1px solid #000;
}
.child1 {
width: 150px;
height: 150px;
background-color: red;
}
.child2 {
width: 100px;
height: 100px;
background-color: blue;
position: fixed;
top: 0;
left: 0;
}
由于child2 祖先元素parent的 transform
属性非 none
,容器由视口改为该祖先
如果我们去掉parent中transform属性(加上left、top看效果),此时child2就是相对于屏幕视口定位
sticky
元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于
top
,right
,bottom
, 和left
的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的
overflow
是hidden
,scroll
,auto
, 或overlay
时),即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为(详情见Github issue on W3C CSSWG)。
理解下就以下几点:
- position:sticky 被称为粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素。
- 可以说是相对定位relative和固定定位fixed的结合,元素在跨越特定阈值前为相对定位,之后为固定定位。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量。
-
父元素不能overflow:hidden或者overflow:auto属性, 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
-
父元素的高度不能低于sticky元素的高度
-
sticky元素仅在其父元素内生效
<head>
<style>
.grandparent {
width: 500px;
height: 300px;
overflow: auto;
}
.parent {
background-color: wheat;
position: relative;
width: 500px;
height: 500px;
}
.child {
background-color: #000;
width: 100px;
height: 100px;
top: 100px;
position: sticky;
}
</style>
</head>
<body>
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
</div>
</body>
总结
定位的元素的起始位置为父包含块的内边距(不会在border里,除非使用负值,会在padding里)
浮动、绝对定位和固定定位会脱离文档流,相对定位不会脱离文档流;
绝对定位相对于该元素最近的已定位(非 static 定位)的祖先元素,如果没有一个祖先元素设置定位,那么参照物是body
绝对定位相对于包含块的起始位置:
- 如果祖先元素是块级元素,包含块则设置为该元素的内边距边界。
- 如果祖先元素是行内元素,包含块则设置为该祖先元素的内容边界
参考资料: