<!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; } .box div { width: 100px; height: 100px; background-color: pink; display: inline-block; } .two { position: relative; left: 50px; top: 50px; } .box .three { position: absolute; left: 100px; background-color: plum; } .box2 { height: 400px; position: relative; } .a { position: sticky; height: 200px; width: 200px; top: 200px; background-color: powderblue; } .b { position: sticky; height: 100px; width: 100px; top: 50px; opacity: .8; background-color: palegreen; } </style> <body> <div class="box"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> </div> <div class="box2"> <div class="a">absol</div> <div class="b"></div> </div> </body> </html>
大多数时候,绝对定位的元素height和width设置为auto大小以适合他们的内容。
然而,非取代绝对定位的元素可以通过指定两个填充可用的垂直空间top和bottom和离开height未指定的(即auto)。
他们同样可以通过指定两个可用的水平空间填满left和right和离开width作为auto。
相对定位的元素是抵消给定文档中从正常位置,但没有影响其他元素的偏移量。