"
Position的值有:absolute,fixed,relative,static,inherit.
absolute的描述:1.生成绝对定位的元素,相对于static定位以外的第一个父元素定位。
2. 元素的位置通过""left"",""top"",""right"",""bottom""属性进行规定。
fixde的描述:1.生成绝对定位元素,相对于浏览器窗口进行定位。
2. 元素的位置通过""left"",""top"",""right"",""bottom""属性进行规定。
relative的描述:1.生成相对定位的元素,相对于它的正常位置进行定位。
2.例如:""left:20"",会向元素的left位置添加20像素(px)
static的描述:是一个默认值,没有定位,元素会在正常位置。
inherit的描述:规定应该父元素继承position属性的值。
Document
*{
margin: 0;
padding: 0;
}
.boa div{
//代码效果参考:https://v.youku.com/v_show/id_XNjQwNjgyMTgxNg==.html
width: 200px;height: 200px;
background-color: aquamarine;
margin-right: 30px;
display: inline-block;
text-align: center;
font-size: 30px;
line-height: 200px;
}
.bob{
position: relative;
left: 20px;
top: 20px;
}
.boc .three{
position: absolute;
left: 100px;
background-color:rgb(194, 173, 176);
z-index: 77;
opacity: .6;
}
.bod{
height: 600px;
position: relative;
}
.boe{
position: sticky;
//代码效果参考:https://v.youku.com/v_show/id_XNjQwMDM2NjczNg==.html
height: 100px;width: 100px;
top: 100px;
background-color: rgb(182, 189, 186);
margin-bottom: 100px;
}
.bof{
position: sticky;
height: 100px;
width: 100px;
top: 50px;
opacity: .8;
background-color: rgb(118, 219, 175);
}
.boh{
height: 1200px;
background-color: aquamarine;
}
"