相对位置还是绝对位置?

position: relativeposition: absoluteCSS 和有什么不一样?那你什么时候应该使用呢?

回答:

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放置了样式,则其位置将根据其当前位置而不是从视口的原始侧面偏移。

第1段

第2段

第3段。在上面的示例中,第三段将位于3em容器元素的左侧,但仍将位于前两段的下方。它会保留在文档的正常流程中,并且会稍有偏移。如果将其更改为position:

absolute;,则其后的所有内容都将显示在其顶部,因为它将不再属于文档的正常流程。

  • 默认width的是绝对定位的元素的是在其中的内容的宽度,不同于被相对定位在那里它的默认的元素width100%该空间也可以填充的。

  • 您可以使元素与绝对定位的元素重叠,而不能对相对定位的元素进行重叠(本机,即不使用负边距/定位)

以上是 相对位置还是绝对位置? 的全部内容, 来源链接: utcz.com/qa/407685.html

回到顶部