W odniesieniu do sekcji pozycjonowania w3schools.com lub który Pytanie SO, powinno być możliwe wyrównanie elementu div na dole, stosując następujące zasady:
- styl elementu kontenera musi być
position: relative; - styl elementu docelowego musi być
position: absolute; bottom: 10px(do wyrównania 10 px nad dnem kontenera).
Przykładowy kod znajduje się poniżej bootply.
.container-btn to zielone pole, które powinno być umieszczone na buttom, ale zamiast tego jest umieszczone 10px nad elementem kontenera. Jednak ustawienia top/left/right: 10px działają zgodnie z oczekiwaniami.
Czy ktoś mógłby wyjaśnić to zachowanie? Właśnie uczę się CSS i chcę zrozumieć, dlaczego tak się zachowuje ...
Odpowiedzi:
2 dla odpowiedzi № 1The container-btn w rzeczywistości jest to 10px od dołu jego rodzica, col-md-4, po prostu zdarza się, że rodzic nie ma żadnej wysokości. Nadanie tej kolumnie wysokości, na przykład innej, .col-md-4 { height: 500px; } zobaczysz, że zielone pole przesuwa się w dół, tak jak się spodziewałeś.