CSS position
阿新 • • 發佈：2018-10-05
設置 其他 eight 兩種 技術 text sta -s 位置
<!DOCTYPE html> <html> <head> <title>練習</title> </head> <body> <div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div><link rel="stylesheet" type="text/css" href="file:///D:/Sublime%20Text%203/Sublime%20Text%203/%E4%BB%A3%E7%A0%81/Css%E5%AE%9E%E9%AA%8C"> </div> </body> </html>
.box { display: inline-block; width: 100px; height: 100px; background: red; color: white; } #two { position: static; top: 200px; left: 200px; background: blue; }
1、position: static
static(沒有定位)是position的默認值，元素處於正常的文檔流中，會忽略left、top、right、bottom和z-index屬性。
#two { position: relative; top: 200px; left: 200px; background: blue; }
2、position: relative
relative(相對定位)是指給元素設置相對於原本位置的定位，元素並不脫離文檔流，因此元素原本的位置會被保留，其他的元素位置不會受到影響。
#two { position: sticky ; top: 200px; left:200px; background: blue; }
3、sticky
設置了sticky的元素，在屏幕範圍（viewport）時該元素的位置並不受到定位影響（設置是top、left等屬性無效），當該元素的位置將要移出偏移範圍時，定位又會變成fixed，根據設置的left、top等屬性成固定位置的效果。
#two { position: absolute; top: 200px; left: 200px; background: blue; }
4、position: absolute
absolute(絕對定位)是指給元素設置絕對的定位，相對定位的對象可以分為兩種情況：
1) 設置了absolute的元素如果存在有祖先元素設置了position屬性為relative或者absolute，則這時元素的定位對象為此已設置position屬性的祖先元素。
2) 如果並沒有設置了position屬性的祖先元素，則此時相對於body進行定位。
CSS position