position
2016-05-13 21:50
281 查看
position:absolute这个是绝对定位; 是相对于浏览器的定位。 比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 比如:<div class="1"></div><div class="2"></div> 当1固定了位置。1的样式float:left;width:100px; height:800px; 2的样式为float:left; position:relative;margin-left:20px;width:50px; 2的位置在1的右边,距离120px、relative与absolute的主要区别:
首先,是上面已经提到过的在正常流中的位置存在与否。
其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。如图3:
图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:
可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:
除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。
相关文章推荐
- [主席树 树状数组套权值线段树] BZOJ 1146 [CTSC2008]网络管理Network
- vim/vi编辑器中常用操作汇总
- 抛硬币真是个好办法
- 典型用户及用户场景描述
- Spring-mvc junit单元测试中 如何回滚?
- CentOS6下Jenkins连接Git服务器出错的问题
- MultiAutoCompleteTextView控件
- paxos算法,分布式基础算法。
- CCNU 校赛J---分桶法
- Mysql-proxy 读写分离中间组件
- hdu 1598 find the most comfortable road 枚举+并查集
- 练习打字第九天!
- 安卓3个练习题
- Find the Duplicate Number
- [iOS]从URL远程请求图片
- linux:error while loading shared libraries xx.so
- 进度条
- 《宗庆后:万有引力原理》:娃哈哈官方口径,可以作为了解娃哈哈及其相关领域的重要参考资料。三星推荐
- 微信课堂的初步确立
- 第十一周项目4—教师兼干部类