Wystarczy informować position:absolute Element można przypisać wartość domyślną top na podstawie pozycji jego "natychmiastowego rodzica" niezależnie od relative lub nie. Według Boltglock ,

Pozostaje w pozycji statycznej i nigdzie nie pójdzie.

Oto kod:

.container {
  height: 500px;
  width: 300px;
  position: relative;
}

.parent {
  height: 200px;
}

.child {
  height: 50px;
  left: 0;
  right: 0;
  position: absolute;
}

.blue {
  background-color: #a6cee3;
  border: 3px solid #1f78b4;
}

.green {
  background-color: #b2df8a;
  border: 3px solid #33a02c;
}

.red {
  background-color: #fb9a99;
  border: 3px solid #e31a1c;
}

.orange {
  background-color: #fdbf6f;
  border: 3px solid #ff7f00;
}

.violet {
  background-color: #cab2d6;
  border: 3px solid #6a3d9a;
}
<div class="container blue">
  <div class="parent orange"></div>
  <div class="parent violet">
    <div class="child red"></div>
  </div>
</div>

Chcę, aby element absolutny zajmował "pozostałą przestrzeń" pojemnika, tj. Z wyłączeniem pierwszego rodzica. Mój pomysł jest ustawiony bottom:0, czego oczekuję, jest top jest już ustawiony jakoś, a jeśli jest ustawiony bottom, może być obliczana i rozszerzyć pozostałą przestrzeń, ale To nie działa.

Czy jest jakieś rozwiązanie?

0
Guichi 17 luty 2017, 01:58

2 odpowiedzi

Najlepsza odpowiedź

Absolutnie pozycjonowane pudełko może przyjmować tylko w pozycji statycznej, jeśli zarówno top i bottom (lub zarówno left, jak i right lub wszystkie cztery) są automatycznie. Nie można ustawić przesunięcia z jednej strony i oczekujemy, że pudełko pozostanie w pozycji statycznej, ponieważ po zrekompensowaniu pudełka nie jest już w pozycji statycznej .

0
BoltClock 17 luty 2017, 04:25

Dlaczego nie ustawić width i height o absolutnie pozycjonowanym elemencie dziecka do 100%?

Zobacz To Remix twojego skrzypce.

0
SpyderScript 17 luty 2017, 04:06