Css posiiton relative i absoulte

Question

Witam.

Mam taki oto kod.

    <div class="parent" style="border: solid thin red; position: relative">
        <div class="child" style="width: 200px; height: 200px; border: solid thin green; position: absolute;">

        </div>
    </div>

Czy jest możliwość aby aby rodzic który ma position realtive dostosował swoją wysokość do wsyokości dziecka który ma positon absolute?

Bo teraz to rodzic ma zawsz wysokość 0.

 

Answer 1

Jeśli chcesz przejść z tego:

Do tego:

To zamień pozycje między sobą 

 

---

Pozycjonowanie absolutne lub bezwzględne, włączane za pomocą wartości absolute, powoduje „wyjęcie” elementu z normalnego układu i ustalenie jego pozycji względem najbliższego mu nadrzędnego elementu pozycjonowanego, a jeśli takiego nie ma, to względem elementu body. Dla uproszczenia u nas na razie jest tylko element nadrzędny body, więc pozycja będzie ustalana względem niego.
[...]
Pozycjonowanie względne, włączane za pomocą wartości relative, pozwala określić położenie elementu względem jego położenia, jakie przyjąłby w układzie normalnym strony. Inaczej mówiąc, najpierw przeglądarka wstawia dany element w miejscu, w którym znajdowałby się, gdyby nie był w ogóle pozycjonowany, a następnie przesuwa go zgodnie z ustawieniami własności top, right, bottom i left.

Answer 2

Proponuje nadać wielkość stałą rodzicowi a "dopasować" dziecko, czyli np. tak

.parent {
  position: relative;
  width: 200px; 
  height: 200px;
  border: 4px solid red;
}
.child {
  position: absolute;
  width: calc(100% - 8px); 
  height: calc(100% - 8px);
  border: 4px solid green;
}

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