特別是在div的應用上更迷。
3 回答
已采納
blovetu
TA貢獻319條經(jīng)驗 獲得超234個贊
position：absolute這個是絕對定位；
是相對于瀏覽器的定位。
比如：position：absolute；left:20px;top:80px; 這個容器始終位于距離瀏覽器左20px,距離瀏覽器上80px的這個位置。
position：relative是相對定位，是相對于前面的容器定位的。這個時候不能用top left在定位。應該用margin。
比如：<div class="1"></div><div class="2"></div>
你可以把相對定位當成是絕對定位父親，那么position:relative天生可以限制position:absolute在left/top移動的能力。好像是如來的大手掌限制了孫猴子的筋斗云一樣。
qq_非誠勿擾_3
TA貢獻37條經(jīng)驗 獲得超16個贊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對定位和相對定位</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
div{
width:15%;
border:#ccc solid 1px;
margin-bottom:100px;
margin-left:20px;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.float-left{
float:left;
}
.left{
left:10px;
}
.right{
right:0;
}
.overflow{
overflow:hidden;
}
</style>
</head>
<body>
<div>
<img alt="這是一張圖片" src="board.jpg">什么都沒有添加的情況下
</div>
<div>
<img alt="這是一張圖片" src="board.jpg" class="relative left">圖片添加了相對定位，父元素沒有塌陷，因為其并沒有脫離文檔流，對其設置left是基于其本身位置的
</div>
<div>
<img alt="這是一張圖片" src="board.jpg" class="absolute">圖片添加了絕對定位，父元素高度塌陷了，跟浮動不同的是，絕對定位會遮住其他元素，相當于漂浮了
</div>
<div>
<img alt="這是一張圖片" src="board.jpg" class="float-left">圖片添加左浮動，同樣是父元素塌陷，與上一個例子對比
</div>
<div>
<img alt="這是一張圖片" src="board.jpg" class="float-left absolute">圖片同時添加左浮動和絕對定位，可以看出浮動失效了
</div>
<div>
<img alt="這是一張圖片" src="board.jpg" class="absolute left">圖片添加了絕對定位，在設置left屬性時是基于瀏覽器的位置
</div>
<div class="relative">
<img alt="這是一張圖片" src="board.jpg" class="absolute left">圖片添加了絕對定位，且父元素添加了相對定位，這時的left屬性變成了相對于父元素的位置，也就是說相對定位會限制絕對定位
</div>
<div class="overflow">
<img alt="這是一張圖片" src="board.jpg" class="absolute">圖片添加了絕對定位，超出了父元素的范圍，即使父元素設置了overflow:hidden，超出部分也會正常顯示
</div>
<div class="overflow relative">
<img alt="這是一張圖片" src="board.jpg" class="absolute">圖片添加了絕對定位，超出了父元素的范圍，父元素設置了overflow:hidden，如父元素設置了relative，超出部分會被切除
</div>
</body>
</html>
試試這個
剛毅87
TA貢獻345條經(jīng)驗 獲得超309個贊
position:relative
????????? 相對定位
? ? ? ? ? 定位的參考是基于它本身的位置
? ? ? ? ? ? 使用 top ，right ，bottom ，left 之前，我們首先需要給元素設置 position
? ? ? ? ? ? 否則不會產(chǎn)生任何效果;
相對定位的特性：
? ? ? ? ?1.相對定位不會影響元素本身的特性
? ? ? ? ?2.相對定位不會使元素脫離文檔流，元素位置移動之后，原始位置會保留
? ? ? ? ?3.如果沒有定義偏移量，對于元素本身沒有任何影響
? ? ? ? ?4.設置相對定位會提升層級
絕對定位 position:absolute
? ? ? ? ?1.參考的是離他最近已經(jīng)定位的父元素，只要不是 static 就可以
? ? ? ? ?2.絕對定位會使元素完全脫離文檔流，
? ? ? ? ?3.如果有定位父級發(fā)生了偏移，元素同樣會隨定位的父級發(fā)生偏移
? ? ? ? ?4.相對定位一般配合絕對定位來使用
? ? ? ? ?5.設置絕對定位會提升層級
添加回答
舉報
0/150
提交
取消