为什么不使用保证金定位而不是使用position:relative top 5px?
标题,基本上。 我一直在使用保证金定位而不是像position: relative
这样的东西来做很多工作,只是因为我不知道你可以这样控制它。
margin
应该做什么?为什么我要在margin
完成工作时使用position
?
简而言之,边距会在元素框的周围添加空格,并修改页面流中为其保留的空间量以匹配。 因此,顶部边距将移动一个块,同时移动所有跟随它的内容。 底部边距移动随后的内容,同时将块本身留在相同的位置。 这非常直观,可能表现出你期望的。
相对定位做了一件奇怪的事情:它改变了一个块的绘制位置,但不是为其保留的空间。 因此,如果您使用相对定位并将顶部设置为10像素,则会将一个框向下移动10页 - 但不会移动后的内容。 这可能会导致一个框与之后的内容重叠。
如果你真的想要一个奇怪的效果(并且看到相对定位),可以将float:left和relative定位到一个小块。 该块将被移动,但为其保留的区域将保留在原来的位置。
我为你做了一个例子:
<div style="position: relative; left: -100px; width: 100px; height: 100px; float: left;">
</div> (lorem ipsum text)
小提琴
首先,静态定位忽略了top
值,所以我认为你的问题有点困惑。 如果你想问的是position:relative
,那么这是一个解决这个问题的答案。
一般来说,我认为使用边距和填充来定位元素相对于它们的邻居而不是相对定位(这是我假设你确实在问的,因为静态定位忽略了top
值)。
相对定位或负边距可能导致重叠对象,而这很少是我想要的,并且可能导致事件路由,边框,背景等问题出现,如果这不是您想要的。 我的position:relative
作为一个容器的position: absolute
,但几乎从来没有用它来移动一个元素本身作为边界和填充几乎总是干净的。
至于你的问题的额外部分是关于边际的做法,你应该做一些搜索,然后一些阅读作为一些图表可能真的帮助你想象这一点。 边距是对象周围的一组外部像素。 边界内是边界。 边框内部是填充,内部填充是内容。 因此,边距是边框外对象周围的像素数量,填充是边框和对象内容之间的像素数量。
如果没有指定边框,除了相邻对象的边距有时会折叠(例如合并为单个边距)之外,边距和填充效果非常相似,但填充不会以这种方式进行组合,并且背景会延伸到边框,但不会保证金。
这里是一个StackOverflow关于边距与填充的问题/答案,它提供了一些其他有用的参考:何时使用边距vs填充在CSS
这里有一篇关于包含边距和填充的CSS盒模型的好文章
使用这个技巧:
a)请参阅HTML5的doctype
b)重置隐藏边距:
星号{margin:0; padding:0;}
链接地址: http://www.djcxy.com/p/29423.html上一篇: Why not use margin positioning instead of using position:relative top 5px?