我今天正在考虑CSS定位模式,并意识到position:relative除了position:absolute在子元素上工作之外,我从不使用 任何东西.
我更像是一个"开发人员"而不是"设计师",但多年来我已经做了很多基于CSS的布局.我已经使用了表格,浮点数,边距(正面和负面),位置:绝对位置,甚至位置:固定,但我认为我从未有过使用位置的场合:相对于实际定位元件.
是否有一些伟大的CSS-guru技术依赖于位置:相对(并用于实际设计)？我错过了吗？
我posotion: relative过去曾用过一个容器元素,里面有绝对定位的元素(就像一个居中的三列布局).例如:
alt text http://www.freeimagehosting.net/uploads/2573654d07.png
我没有给容器任何偏移,但是定位它position: relative允许我绝对地将列相对于容器定位.如果容器position: static默认设置为,则列将相对于浏览器视口绝对定位,而不是容器.
如果你想要偏移一个元素而没有利用边缘及其对其他元素的影响,它会很有用.假设你想故意让一个图像从容器的侧面戳出来并且(几乎)与它旁边的容器中的某些内容重叠.
------------- -----
| | | |
| X -------| Y |
| | a || |
| -------| |
------------- -----
容器a是正常文本流的一部分X,你想保持这种方式,你只是希望它作为一个整洁的效果戳出一边.如果你用边距做到这一点,它可能会变得非常混乱并重新转换你的其他一些内容.
通过使用,position: relative; left: 10px;你可以轻松地获得这种效果,没有副作用.