CSS定位中Positoin、absolute、Relative的一些研究

CSS定位中Position、Absolute、Relative的一些研究

Position属性

CSS中的Position属性用于指定元素在文档中的定位方式。它可以取三个值，分别是static、relative和absolute。

• static: 默认值。元素按照正常文档流进行排布。
• relative: 元素相对于其正常位置进行定位，也就是说，相对于该元素在文档中的实际位置进行定位。如果没有设置left、right、top、bottom属性，则仍然按照正常文档流进行排布。
• absolute: 元素相对于最近的非static定位的父元素进行定位。如果没有找到这样的父元素，则相对于body元素进行定位。

定位的相对性

上面提到了Position属性可以用来指定元素在文档中的定位方式。对于absolute和relative属性来说，它们还有一个重要的特性，就是它们支持对位置的调整。这个位置的调整是相对于元素的原始位置来进行的。

对于relative属性来说，元素需要设置left、right、top、bottom属性来进行位置调整。元素的位置调整不会影响其他元素的位置，所以它不会导致其他元素重新排布。

<div style="background-color: pink; padding: 50px;">
  <div style="background-color: yellow; position: relative; left: 50px;">I'm relative element</div>
</div>

对于absolute属性来说，元素需要设置left、right、top、bottom属性来进行位置调整。然而，它的定位是相对于最近的非static定位的父元素来进行的，也就是说如果没有设置非static定位的父元素，那么就相对于body元素进行定位。

<div style="background-color: pink; padding: 50px; position: relative;">
  <div style="background-color: yellow; position: absolute; left: 50px;">I'm absolute element</div>
</div>

定位的叠加性

如果一个元素同时设置了relative和absolute属性，那么它的位置调整是相对于它自己的位置进行的。此时，它的位置调整会影响其他元素的位置，因为其他元素需要重新排布以腾出位置给它。

<div style="background-color: pink; padding: 50px;">
  <div style="background-color: yellow; position: relative;">
    <div style="background-color: purple; position: absolute; left: 50px;">I'm absolute element</div>
  </div>
  <div style="background-color: blue;">I'm another element</div>
</div>

定位的堆叠性

如果两个相邻的元素同时设置了position属性，并且它们之间没有空隙，那么它们的垂直位置的相对性取决于它们的z-index值。z-index属性用于指定元素在垂直方向上的堆叠顺序。z-index值越大的元素在前面，越小的元素在后面。

<div style="background-color: pink; padding: 50px;">
  <div style="background-color: yellow; position: relative; z-index: 1;">I'm relative element with z-index 1</div>
  <div style="background-color: blue; position: relative; z-index: 2;">I'm relative element with z-index 2</div>
</div>

总结

• Position属性用于指定元素在文档中的定位方式。它可以取三个值，分别是static、relative和absolute。
• relative属性是相对于元素的原始位置进行定位的，可以使用left、right、top、bottom属性进行位置调整。调整相对位置不会对其他元素产生影响。
• absolute属性是相对于最近的非static定位的父元素进行定位的。定位的顺序受该父元素的位置影响。
• 如果一个元素同时设置了relative和absolute属性，那么它的位置调整是相对于它自己的位置进行的。其他元素需要重新排布以腾出位置给它。
• 如果两个相邻的元素同时设置了position属性，并且它们之间没有空隙，那么它们的垂直位置的相对性取决于它们的z-index值。z-index值越大的元素在前面，越小的元素在后面。