div cannot be moved to the top - html

Question

For some reason I can't position the last div with class feature to the top of the parent div.
First I tried it without the extra style-rule for the last feature-div, but no change. Now I tried it with the extra.
.feature:last-of-type {
top: 0;
}
But just like before nothing happens. Slowly I'm really desperate where the mistake is..
I would be very grateful if someone could help me!
This is my 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>
..and this my 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

This works but your problem now is your last feature that's now at the top covers the original top item because it's out of the document flow.
Preferred fix for this is either make it correct in the HTML or use JavaScript to move that last container to the top in the 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>