Absolutne pozycjonowanie ignorujÄ…c padding rodzica
Jak sprawić, by Element pozycyjny absolutny honorował padding jego rodzica? Chcę, aby wewnętrzny div rozciągał się na szerokość swojego rodzica i był umieszczony na dole tego rodzica, zasadniczo jako stopka. Ale dziecko musi uszanować wyściółkę rodzica i nie robi tego. Dziecko jest dociskane do krawędzi rodzica.
Więc chcę tego:
Ale mam to:
<html>
<body>
<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
<div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
</div>
</body>
</html>
I can make it happen z marginesem wokół wewnętrznego div, ale wolałbym tego nie dodawać.
7 answers
Najpierw zobaczmy dlaczego to siÄ™ dzieje.
Powodem jest to, że, o dziwo, gdy pudełko ma position: absolute jego pudełko zawierające jest rodzicem (to jest pudełko wokół jego wypełnienia). Jest to zaskakujące, ponieważ zazwyczaj (tj. przy użyciu pozycjonowania statycznego lub względnego) pole zawierające to pole rodzica content.
Oto odpowiednia część specyfikacji CSS :
W przypadku, gdy przodek jest element Wbudowany, blok zawierający jest obwiednią wokół pól wypełniających pierwszego i ostatniego pola wbudowanego wygenerowanego dla tego elementu.... W przeciwnym razie blok zawierający jest tworzony przez krawędź wyściełającą przodka.
Najprostszym podejściem-jak sugerowano w odpowiedzi Wintera-jest użycie padding: inherit Na absolutnie pozycjonowanym div. Działa to jednak tylko wtedy, gdy nie chcesz, aby absolutely posited div miało własne dodatkowe wyściółki. Myślę, że najbardziej rozwiązania ogólnego przeznaczenia (w tym, że oba elementy mogą mieć własne niezależne wyściółki) to:
-
Dodaj dodatkowy relatywnie umieszczony
div(bez wyściółki) wokół absolutnie umieszczonydiv. Ten nowydivbędzie respektował wyściółkę swojego rodzica, a absolutnie umieszczonydivwypełni ją.Minusem jest oczywiście to, że bawisz się w HTML tylko w celach prezentacyjnych.
-
Powtórz wypełnienie (lub Dodaj do to) na absolutnie pozycjonowanym elemencie.
Minusem jest to, że musisz powtórzyć wartości w CSS, który jest kruchy, jeśli piszesz CSS bezpośrednio. Jeśli jednak używasz narzędzia do wstępnego przetwarzania, takiego jak
SASSlubLESS, możesz uniknąć tego problemu za pomocą zmiennej. Jest to metoda, której osobiście używam.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-12 05:32:07
Jedną z rzeczy, którą możesz wypróbować, jest użycie następującego css:
.child-element {
padding-left: inherit;
padding-right: inherit;
position: absolute;
left: 0;
right: 0;
}
Pozwala elementowi potomnemu dziedziczyć padding od rodzica, a następnie dziecko może być ustawione tak, aby pasowało do widht i padding parents.
Również używam box-sizing: border-box; dla elementów.
Nie testowałem tego we wszystkich przeglądarkach, ale wydaje się, że działa w Chrome, Firefox i IE10.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-10 13:43:34
Cóż, może to nie jest najbardziej eleganckie rozwiązanie (semantycznie), ale w niektórych przypadkach będzie działać bez wad: zamiast wypełnienia użyj przezroczystej obramowania na elemencie nadrzędnym. Bezwzględnie umieszczone elementy potomne będą honorować obramowanie i będą renderowane dokładnie tak samo(z wyjątkiem obramowania elementu nadrzędnego do stylizacji).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-09 18:11:24
Oto moja najlepsza szansa. Dodałem kolejny Div I zrobiłem go na czerwono i zmieniłem wysokość rodzica na 200px tylko po to, aby go przetestować. Chodzi o to, że dziecko staje się wnukiem, a rodzic dziadkiem. Więc rodzic szanuje swojego rodzica. Mam nadzieję, że rozumiesz mój pomysł.
<html>
<body>
<div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
<div style="background-color: red; position: relative; height: 100%;">
<div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
</div>
</div>
</body>
</html>
Edit:
Myślę, że to, co próbujesz zrobić, nie może być zrobione. Pozycja absolutna oznacza, że masz zamiar nadać mu współrzędne, które musi honorować. Co jeśli rodzic ma padding 5px. I absolutnie umieść dziecko w top: -5px; left: -5px. Jak to jest honorować rodzica i ciebie w tym samym czasie??Moje rozwiązanie
Jeśli chcesz, aby uhonorować rodzica, nie pozycjonuj go absolutnie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-14 19:15:29
Użyj marginesu zamiast wypełnienia w nadrzędnym div: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-27 19:41:05
1.) nie możesz użyć big border na rodzicu -- w przypadku, gdy chcesz mieć określoną ramkę
2.) nie możesz dodać marginesu - w przypadku, gdy twój rodzic jest częścią innego kontenera i chcesz, aby twój rodzic wziął całą szerokość tego wielkiego rodzica.
Jedynym rozwiązaniem, które powinno mieć zastosowanie, jest owinięcie dziecka w inny pojemnik, tak aby twój rodzic stał się dziadkiem, a następnie nałożenie wyściółki na nowe opakowanie / rodzica dla dzieci. Lub możesz bezpośrednio zastosować wyściółka dla dzieci.
W Twoim przypadku:
.css-sux{
padding: 0px 10px 10px 10px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-05 10:43:28
Można było łatwo zrobić używając dodatkowego poziomu Div.
<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
<div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
<div style="background-color: gray;">css sux</div>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-10 07:46:33