相对位置还是绝对位置?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (18)

位置相对和位置绝对之间有什么区别?在CSS中什么时候使用哪一个?

提问于
用户回答回答于

绝对CSS定位

position: absolute;

绝对定位是最容易理解的。从CSS开始position财产:

position: absolute;

这告诉浏览器,要定位的东西应该从文档的正常流中移除,并放置在页面上的确切位置。它不会影响它之前的元素或HTML后面的元素在网页上的位置,但是威尔除非你推翻它,否则你要服从它父母的定位。

如果要将元素从文档窗口顶部定位为10个像素,则可以使用top偏移到position在那里absolute定位:

position: absolute;
top: 10px;

然后,该元素将始终显示。10px从页面的顶部,不管什么内容通过,下面或之上的元素(视觉)。

四个定位属性是:

  1. top
  2. right
  3. bottom
  4. left

要使用它们,您需要将它们视为偏移量属性。换句话说,定位的元素right: 2px不向右移动2px...。它的右侧与窗口的右侧(或其重写父窗口的位置)相抵2px...。其他三人也是如此。

相对定位

position: relative;

相对定位使用与absolute定位。但是,它不是将元素的位置建立在浏览器视图端口上,而是从元素仍然处于正常状态时的位置开始。

例如,如果网页上有三个段落,而第三个段落有一个position: relative样式放置在它上,它的位置将根据其当前位置而被抵消--而不是从视图端口的原始侧面。

在上面的例子中,第三段将被定位。3em从容器元素的左边,但仍将低于前两段。它将保留在正常的文档流中,并将被稍微抵消。如果你把它改成position: absolute;,它后面的任何内容都会显示在上面,因为它将不再处于文档的正常流中。

用户回答回答于

“相对”和“绝对”的定位实际上都是相对的,只是有着不同的框架。“绝对”定位是相对于另一个位置,包围元素。“相对”定位是相对于元素本身没有定位的位置。

这取决于你的需求和目标。“相对”位置适合于当您想要从元素流中的位置中替换一个元素时,例如,使一些字符出现在上标位置上。“绝对”定位适用于将元素放置在由另一个元素设置的坐标系中,例如,用某些文本“重印”图像。

作为一个特殊的,使用“相对”定位,没有位移(只是设置)。position: relative)使元素成为一个参考框架,以便您可以对元素中的元素使用“绝对”定位(在标记中)。

扫码关注云+社区