之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性。当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结。在这里会注明借鉴或引用文章的出处。侵权即删。
position属性值包括 static,relative,absolute,fixed,sticky(实验属性)5种。
1.static
该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时设置 top, right, bottom, left 和 z-index 属性无效
<style>
.parent{
background-color: red;
width: 100px;
height: 100px;
}
.static{
width: 50px;
height: 50px;
/* position: static;
top: 10px; 这段注释代码加与不加没有区别
left: 10px;*/
background: blue;
}
</style>
<div class="parent">
<div class="static"></div>
</div>
chrome浏览器运行草图
2.relative
该关键字指定元素 即在不改变页面布局的前提下相对于自身原来位置调整元素位置(原来位置仍然保留)。position: relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效
<style>
.parent{
background-color: red;
width: 120px;
height: 120px;
}
.one{
width: 30px;
height: 30px;
background: green;
}
.two{
width: 30px;
height: 30px;
background: blue;
position: relative;
left: 10px;
top: 10px;
}
.three{
width: 30px;
height: 30px;
background: yellow;
}
</style>
<div class="parent">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
浏览器运行效果如下
3.absolute
不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
或
![]()
此时绿色方块平移,而原来位置不再保留,其相邻元素填充它原来位置并且是相对于html移动,脱离文档流。
假如修改.parent代码添加 position:relative。
.parent{
background-color: red;
width: 120px;
height: 120px;
position: relative;
/*left:0;*/
right: 0;
}
left:0;(绿色方块覆盖蓝色 )
right:0;(绿色方块相对于红色方块平移)
这两图说明绿色(.one)相对于父元素移动.
即 相对于 最近的 非 static 定位祖先元素的偏移,来确定元素位置
4.fixed
不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
<style>
body{
height: 2000px;
width: : auto;
}
.parent{
background-color: red;
width: 1360px;
height: 50px;
position: fixed;
bottom: 0;
}
</style>
<body>
<div class="parent">
</div>
</body>
即 在滚动界面时 div.parent 始终 固定在页面底部
5.sticky
盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同
这个不大好演示请大家看文档 sticky效果图
本文同时借鉴了 Wayne Zhu 的文章