對Css屬性：positon的認識與理解！
阿新 • • 發佈：2018-11-12
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{ 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; 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; } </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>