div 无法移动到顶部

Question

出于某种原因，我无法将带有 class feature 的最后一个 div 定位到父 div 的顶部。首先，我在最后 feature-div 没有额外样式规则的情况下尝试了它，但没有改变。现在我用额外的东西试了一下。

.feature:last-of-type {
    top: 0;
}

但就像什么都没有发生之前一样。慢慢地我真的很绝望错误在哪里.. 如果有人能帮助我，我将不胜感激！

这是我的 HTML:

<div id="features">

  <div class="feature">
    <div class="img-wrapper">
      <img src="img/30_Min_Recipes.png" alt="Täglich neue Rezepte">
    </div>
    <div class="text-wrapper">
      <h3>30-Minuten-Rezepte</h3>
      <p>Entdecke täglich 3 neue Rezeptideen</p>
    </div>
  </div>

  <div class="feature">
    <div class="img-wrapper">
      <img src="img/Shopping.png" alt="Zutaten, die es in jedem Supermarkt gibt">
    </div>
    <div class="text-wrapper">
      <h3>Einkaufsliste</h3>
      <p>Finde alle Zutaten in deinem Supermarkt</p>
    </div>
  </div>

  <div class="feature">
    <div class="img-wrapper">
      <img src="img/Cooking.png" alt="Einfaches und gesundes Kochen">
    </div>
    <div class="text-wrapper">
      <h3>Kochanleitung</h3>
      <p>Koche einfach & gesund</p>
    </div>
  </div>

</div>

..这是我的 CSS:

/* ---Beginn--- Features */
#features {
    min-height: calc(85% - 108px*2);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 108px 384px;

    background-color: var(--c-light-beige);
}

.feature {
    position: relative;
    display: inline-block;
    width: 340px;
}

.feature:last-of-type {
    top: 0;
}

.feature .img-wrapper {
    width: calc(100% - 20px*2);
    padding: 0 20px;
}

.feature .text-wrapper {
    width: calc(100% - 40px*2);
    padding: 0 40px;
}

.feature img {
    width: 300px;
    height: 300px;
}

.feature h3 {
    width: 100%;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: var(--c-dark-beige);
}

.feature p {
    width: 100%;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    color: var(--c-headline-dark);
}

/* ---Ende--- Features*/

Answer 1

这可行，但您现在的问题是现在位于顶部的最后一个功能覆盖了原始顶部项目，因为它不在文档流中。

对此的首选修复是在 HTML 中使其正确或使用 JavaScript 将最后一个容器移动到 DOM 中的顶部。

/* ---Beginn--- Features */
#features {
    min-height: calc(85% - 108px*2);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 108px 384px;

    background-color: var(--c-light-beige);
}

.feature {
    position: relative;
    display: inline-block;
    width: 340px;
}

.feature:last-of-type {
/*I added this code */
position: absolute;
left: 0;
right: 0;
    top: 0;
    background: violet;
    width: 100%;
    /* end added code */
}

.feature .img-wrapper {
    width: calc(100% - 20px*2);
    padding: 0 20px;
}

.feature .text-wrapper {
    width: calc(100% - 40px*2);
    padding: 0 40px;
}

.feature img {
    width: 300px;
    height: 300px;
}

.feature h3 {
    width: 100%;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: var(--c-dark-beige);
}

.feature p {
    width: 100%;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    color: var(--c-headline-dark);
}

/* ---Ende--- Features*/

<div id="features">

  <div class="feature">
    <div class="img-wrapper">
      <img src="img/30_Min_Recipes.png" alt="Täglich neue Rezepte">
    </div>
    <div class="text-wrapper">
      <h3>30-Minuten-Rezepte</h3>
      <p>Entdecke täglich 3 neue Rezeptideen</p>
    </div>
  </div>

  <div class="feature">
    <div class="img-wrapper">
      <img src="img/Shopping.png" alt="Zutaten, die es in jedem Supermarkt gibt">
    </div>
    <div class="text-wrapper">
      <h3>Einkaufsliste</h3>
      <p>Finde alle Zutaten in deinem Supermarkt</p>
    </div>
  </div>

  <div class="feature">
    <div class="img-wrapper">
      <img src="img/Cooking.png" alt="Einfaches und gesundes Kochen">
    </div>
    <div class="text-wrapper">
      <h3>Kochanleitung</h3>
      <p>Koche einfach & gesund</p>
    </div>
  </div>

</div>

div 无法移动到顶部

div cannot be moved to the top

html

css

positioning

css-position