我已经使用HTML和CSS一段时间了。 每次我在CSS工作时，我都会觉得我没有＆＃34;做得不错＆＃34;。
例如，当在网页上定位不同的div和元素时，我使用＆＃34; position：absolute＆＃34;和＆＃34;职位：亲属＆＃34;经常。 找到＆＃34;对＆＃34;这有时候非常繁琐。位置和结果非常难看，例如：
position: relative;
width: 1300px;
height: -720px;
除了上述内容之外，如果我改变主意关于其外观或位置的话，它也很难在以后编辑所述div和元素。 我在YouTube上观看过许多人们使用＆＃34; margin＆＃34;和＆＃34;填充＆＃34;用于在网站上定位元素的标签。
我对此非常困惑，因为这些标签应该用于在元素周围创建空间而不是实际改变它们的位置。 奇怪的是，使用＆＃34; margin＆＃34;编辑网站要容易得多。和＆＃34;填充＆＃34;标签以后，如果你改变了对这些元素的外观/位置的看法，因为它们不会移动并相互重叠。
我为长时间的查询道歉，但最近一直困扰我很多，我很感激有关CSS中元素定位的任何建议。
谢谢
答案 0 :(得分：0)
position与margin或padding之间的最大区别在于，当您将position设置为absolute，relative或{{ 1}}，元素从文档的“正常流程”中取出并放置在自己的图层中。这使您可以使用fixed属性和堆栈元素。当有问题的元素将被动态调整大小或动画时，这具有显着的优势，因为这样做不会导致文档中的所有其他元素必须“重新流动”，整个文档也不必“重新绘制” ”。实际上，在使用动态大小调整或动画时，强烈建议您以这种方式将元素从流中取出，否则性能会受到影响。
除此之外，understanding how absolute, relative and fixed positioning work至关重要。
绝对定位将元素相对于其最近的祖先定位，该祖先本身已被手动定位，如果没有定位祖先，则定位z-index元素。元素从流中取出，元素在该流中占据的任何空间都被移除。
相对定位将元素定位为正常流中其原始位置的偏移量，但保留元素在文档中占用的原始空间，即使该元素现在位于其自己的图层中
固定定位类似于绝对定位，但该位置与任何内容无关。它固定在您指定的确切位置。
虽然所有这些都会将元素拉入自己的图层，但图层的堆叠方式（通过 "stacking contexts" ）取决于您使用的定位类型和结构被定位的元素。
这些是使用body的原因。如果您不需要新的图层，使用CSS float，flexbox是可以提供其他方法来设计布局的工具。
position和margin实际上不应该用于布局本身。它们用于布局中的小调整。
总之，浏览器列出页面内容的默认方式是 CSS Box Model ，但使用CSS padding是使用某些内容的一种方法那个盒子模型在主要内容的不同层面。 CSS浮动提供另一种单独的布局算法，而Flexbox提供另一种。在不久的将来， CSS Grid specification 将被标准化，而另一种布局范例将可用。
但position和margin不是布局模型。它们只是您正在使用的任何布局模型中使用的工具。