-
width、height属性优先级高于left、top、right、width
查看全部 -
即使父级容器的height是auto，只要容器是绝对定位拉伸形成，百分比高度值也是支持的
查看全部 -
left、right同时设置时会拉伸absolute元素
查看全部 -
除了static之外的其他定位会阻碍absolute元素的定位
查看全部 -
top、left、bottom、right是组合使用的，一般四个用两个来控制
查看全部 -
绝对定位元素一般不需要z-index
查看全部 -
动画尽量作用在绝对定位的元素上！！（不会影响其他元素）
查看全部 -
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>
查看全部
举报