【转】POSITION: absolute，与 relative区别

CSS布局技巧：让内联元素B相对于父元素A底部对齐

转载于 2011-08-02 20:21:00 发布 · 47 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiangniu/archive/2011/08/02/2125471.html

本文介绍如何通过设置CSS样式，将内联元素B相对于其父元素A底部对齐，包括使用相对定位与绝对定位的方法。详细解释了position属性的作用以及如何在不同浏览器环境下实现布局目标。

如果有两个DIV〔A与B〕
并且B被嵌套与A中
现在你想达到的郊果是让B在任何情况下的垂直属性都为“居底”（与A底对齐）
那么你可能会想到用bottom:0px这样的作法，前提当然是position要设为absolut
但是你会发现，如果这样设的话，得到的效果是B对齐到了浏览器的最下边
这时就要用到position:relative了。
在A中加上一句position:relative，这样就定义了A内部元素的position:absolute是相对于A自身的，而不是浏览器！所以，B中的bottom:0px就会在执行时去找它的父级元素中有没有position:relatavie的，如果没有，它会继续向它更上一层去找，直到找到<body>如果还没有，它的相对物就是济览器了！

转自：http://blog.youkuaiyun.com/kj110/article/details/595230

转载于:https://www.cnblogs.com/xiangniu/archive/2011/08/02/2125471.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。