-
width、height屬性優先級高于left、top、right、width
查看全部 -
即使父級容器的height是auto,只要容器是絕對定位拉伸形成,百分比高度值也是支持的
查看全部 -
left、right同時設置時會拉伸absolute元素
查看全部 -
除了static之外的其他定位會阻礙absolute元素的定位
查看全部 -
top、left、bottom、right是組合使用的,一般四個用兩個來控制
查看全部 -
絕對定位元素一般不需要z-index
查看全部 -
動畫盡量作用在絕對定位的元素上?。。ú粫绊懫渌兀?/p>
查看全部 -
absolute的元素占據0px的空間,所以不會導致換行
查看全部 -
將左側的星號全部絕對定位以避免占據空間
查看全部 -
再次說明,元素absolute之后會保持在原位置并脫離文檔流
查看全部 -
元素絕對定位之后占據的寬、高為0
查看全部 -
(hot)、(推薦)、(VIP)三個小圖片是由絕對定位實現的
查看全部 -
浮動會脫離文檔流并向左移動,絕對定位雖然脫離文檔流,但依然會保持在原來的位置
查看全部 -
absolute折翼天使:
去浮動(不與float同時使用)
位置跟隨 (可使用margin精確定位,相對定位)
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.scroll{
width: 500px;
height: 300px;
overflow: auto;
border: 30px solid #bbb;
}
.close{
position: absolute;
background: url(img/close.png) no-repeat;
width: 32px;
height: 32px;
left: 518px;
top:23px;
}
</style>
</head>
<body>
<div class="scroll">
<a href='javascript:;' class="close" title='關閉'></a>
<img src="http://img1.sycdn.imooc.com//54447b06000171a002560191.jpg" />
<img src="http://img1.sycdn.imooc.com//54447b06000171a002560191.jpg" />
</div>
</body>
</html>
查看全部
舉報