我见过许多使用负边距的布局技术,比如这篇文章中介绍的侧边栏定位经典技巧。看起来这些技术也可以用相对定位来实现。
因此,可以将原本的做法:
.sidebar {
margin-left:-600px;
}
可以这样做:
.sidebar {
position:relative;
left:-600px;
}
相对定位在垂直方向上可能会更清晰,因为顶部边距的调整可能会受到边距折叠等问题的影响。
它们之间是否有优劣之分,还是它们在实际中几乎具有相同的效果?
我见过许多使用负边距的布局技术,比如这篇文章中介绍的侧边栏定位经典技巧。看起来这些技术也可以用相对定位来实现。
因此,可以将原本的做法:
.sidebar {
margin-left:-600px;
}
可以这样做:
.sidebar {
position:relative;
left:-600px;
}
相对定位在垂直方向上可能会更清晰,因为顶部边距的调整可能会受到边距折叠等问题的影响。
它们之间是否有优劣之分,还是它们在实际中几乎具有相同的效果?
使用相对定位将会把内容向左移动,但原来的空间仍然被它占用,除非你也使下一个元素相对定位。然而使用负边距可以使内容和它原本的空间一起移动。
位置属性和负边距都有其用途,没有哪种比另一种更好。这取决于你想做什么。当你想要左右移动、上下移动元素时,并不是每个元素都需要相对或绝对定位。假设你有一个简单的<p>
标签,你想将它向左移动,你不需要给它一个位置属性来移动它。边距是正确的方法。边距会影响站点上其他元素的位置,而位置则会浮动而不影响其他元素的定位。虽然位置属性可以用于许多方面,但主要用于使你的网站成为主要元素的元素,例如:标题、页脚、包装器、菜单、左侧内容、右侧内容。