1.position:static;默認定位方式
2.position:relateve;相對定位,相對於該元素靜態定位的位置(即元素所在正常文檔流的位置)
eg:
<!DOCTYPE html>
<html>
<head>
<title>position相對定位</title>
</head>
<style>
.container {
width: 100%;
height: 200px;
background: silver;
}
div[class^="div"] {
width: 40px;
height: 40px;
background: pink;
border: 1px solid yellow;
}
.div2 {
position: relative;
top: 40px;
left: 40px;
}
</style>
<body>
<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>
</html>結果:
相對定位並沒有脫離文檔流,相對於該元素以前所在的位置進行偏移
3.position:absolute(絕對定位),相對於除了static定位以外的父元素進行定位,如果父元素沒有定位,就根據body(即瀏覽器窗口)進行定位,絕對定位的子元素是脫離文檔流的,在原文檔中不佔有空間
eg:把上述例子第二個子div定位方式修改下,它的父級元素(class="container")沒有定位,所以相對於body進行定位
.div2 {
position: absolute;
top: 40px;
left: 40px;
}結果:
4.position:fixed(固定定位),相對於瀏覽器窗口進行定位,即body
5.position:inherit;繼承父元素的定位方式