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属性的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> *{ margin: 0; padding: 0; } .boa div{ 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; height: 100px; 100px; top: 100px; background-color: rgb(182, 189, 186); margin-bottom: 100px; } .bof{ position: sticky; height: 100px; 100px; top: 50px; opacity: .8; background-color: rgb(118, 219, 175); } .boh{ height: 1200px; background-color: aquamarine; } </style> <body> <div class="boa"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> </div> <div class="bod"> <div class="boe">absol</div> <div class="bof"></div> </div> <div class="boh"></div> </body> </html>