使元素位于其父级之后，但在其祖父级之前 - HTML

有时候，在HTML文档中，我们需要将一个元素放在其父级下，但又不希望它与其兄弟元素并列，而是想将其放在其父级之后。这时，我们可以使用CSS中的 position 属性来实现。

介绍 position 属性

在CSS中，有一个 position 属性，用来定义元素的定位方式。它有以下几个属性值：

• static: 默认值，表示元素遵循文档流，不进行定位。
• absolute: 表示元素根据其祖先元素的位置进行定位。如果没有祖先元素有设置定位属性，那么就根据文档的 body 元素进行定位。
• relative: 表示元素相对于自己原本的位置进行定位，但是仍保留其原本的位置，该定位不会影响其他元素的位置。
• fixed: 表示元素相对于浏览器窗口进行定位，即使文档滚动，该元素的位置也不会改变。

其中，我们需要用到的是 relative 和 absolute。

实现元素的定位

我们来看一下如何实现将一个元素放在其父级下，但又不与其兄弟元素并列的效果。

首先，我们在HTML中定义一个包含有子元素的父元素：

<div class="parent">
  <div class="child"></div>
  <div class="sibling"></div>
</div>

在CSS中，我们对 parent 元素和 child 元素进行设置：

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 0;
  top: 100%;
}

其中，我们将父元素 position 属性设置为 relative，这是因为在默认情况下，子元素的 position 属性是相对于父元素的，如果没有父元素设置 position 属性的话，那么子元素的定位效果就无法实现。

然后，我们将子元素 position 属性设置为 absolute，这是因为我们需要根据父元素来进行定位。同时，由于我们要求子元素不与兄弟元素并列，所以我们将子元素的 left 值设置为0，top 值设置为子元素上方与父元素的距离，也就是 100%。

这时，我们就可以将子元素放在其父元素下方，但不与兄弟元素并列了。

结论

使用 position 属性可以很方便地实现将元素放在其父级之后，且不与其兄弟元素并列的效果。记得要设置好父元素和子元素的 position 属性，并根据实际情况进行调整。