Jak działają pozycje CSS, dlaczego elementy absolutne układają się na siebie zamiast układać jeden po drugim
Jak sprawić, by zarówno #row1
jak i #row2
w poniższym kodzie były widoczne, jeden po drugim pionowo, tak jakby nie było żadnego absolute/relative
pozycjonowania?
<body>
<div class="container">
<div id="row1" class="row">
<div class="col1">Hello</div>
<div class="col2">World</div>
</div>
<div id="row2" class="row">
<div class="col1">Salut</div>
<div class="col2">le monde</div>
</div>
</div>
body {position:relative;}
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}
Update
Potrzebuję, aby elementy miały pozycjonowanie przewidziane w regułach CSS, z powodów tutaj wykluczonych. Więc moje pytanie brzmi, czy możliwe jest osiągnięcie tego, czego szukam, bez usuwania powyższego CSS? Tj. mając the two .row
div
pojawiać się jako" normalne " block
elementy.
Update 2
Jeśli w px
jest określona odpowiednia wysokość, wynik ma oczekiwany wygląd. Ale treść jest programowo dynamiczna więc nie wiem jaka jest wysokość: (
3 answers
Cóż, masz tu jakieś dziwne życzenia, więc pozwól, że wyjaśnię ci, co te pozycje naprawdę znaczą w CSS i jak działają, używanie position: relative;
jest tak samo jak używanie static
position
, Różnica polega na wykonaniu elementu position: relative;
, będziesz mógł użyć top
, right
, bottom
i właściwości left
, choć element będzie się poruszał, ale fizycznie będzie w obiegu dokumentu..
Przechodząc do position: absolute;
, gdy tworzy się dowolny element position: absolute;
, wychodzi on z obiegu dokumentów, stąd nie ma nic do czynienia z jakimkolwiek innym elementem, więc w twoim przykładzie
masz .col1, .col2 {position: absolute;}
, które są umieszczone absolute
, a ponieważ oba są poza przepływem dokumentów, będą one nakładać się... Ponieważ są one już zagnieżdżone pod position: absolute;
rodzicem TJ .container
i ponieważ nie jest przypisane width
, zajmie to minimalną width
i dlatego twoje elementy nakładają się, jeśli nie możesz zmienić swojego CSS(co według mnie nie ma sensu, dlaczego nie możesz zmienić) nadal jeśli chcesz, niż możesz to zrobić..
Demo (Bez usuwania żadnej z position
nieruchomości) i to jest naprawdę brudne
Dla znaków s
, będzie on w top
, ponieważ twój element kontenera jest poza przepływem, a zatem żaden {[19] } nie będzie brany pod uwagę w przepływie dokumentu, chyba że i dopóki nie zawiniesz s
w jakiś element i nie obniżysz go za pomocą, margin
padding
lub pozycjonowanie CSS.
Pozycje CSS wyjaśnione
Jak skomentowałem, oto kilka przykładów jak pozycjonowanie CSS faktycznie działa, na początek są 4 wartości dla właściwości position
czyli static
, która jest domyślna, relative
, absolute
i fixed
, więc zaczynając od static
, nie ma się czego tutaj wiele nauczyć, elementy po prostu układają się jeden pod drugim, chyba że są unoszone lub wykonane display: inline-block
. Z pozycjonowaniem static
, top
, right
, bottom
i left
nie zadziała.
Demo
Idąc do position: relative;
już wyjaśniłem ci ogólnie, to nic innego jak static
, to układa się na innym elemencie, jest w przepływu dokumentów, ale można dostosować elementy position
za pomocą top
, right
, bottom
i left
, fizycznie element pozostaje w przepływie, tylko position
elementu zmienia się.
Demo 2
Teraz przychodzi absolute
co generalnie wielu nie rozumie, kiedy element absolute
wydostaje się z obiegu dokumentu, a zatem pozostaje niezależny, nie ma nic wspólnego z pozycjonowaniem innych elementów, chyba że jest nakładany przez inny element position: absolute
, który można naprawić użycie z-index
do zmiany poziomu stosu. Najważniejsze, aby pamiętać o tym, aby mieć position: relative;
kontener tak, aby absolute
umieszczony element był względny do tego relative
umieszczony element, w przeciwnym razie twój element wyleci w dziczy.
Warto zauważyć, że position: absolute;
element umieszczony absolute;
wewnątrz absolute
elementu nadrzędnego, niż jest względem tego elementu i Nie względem elementu nadrzędnego, który może być umieszczony relative
Demo 3 (Bez position: relative;
kontenera)
Demo 4 (z position: relative;
kontenerem)
Ostatni jest position fixed
, jest to to samo co absolute
, ale płynie po przewijaniu, jest poza przepływem dokumentu, ale przewija się, również, position: fixed;
element nie może być relative
do dowolnego elementu kontenera o dowolnym typie position
, nawet jeślirelative
, position
fixed
element jest zawsze relative
do viewportu, więc projektanci używają position: absolute;
, gdy chcą mieć fixed
position
zachowanie, ale relative
do rodzica i poprawienia właściwości top
onScroll
.
Demo 5
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
2018-03-22 06:42:21
To, czego chcesz, nie jest możliwe bez modyfikacji właściwości CSS position
. Jednak to, co możesz zrobić bez dotykania istniejącego CSS, to nadpisać go bardziej specyficznym selektorem
.row .col1, .row .col2 {
position: relative;
}
Zobacz JSFiddle
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-12-21 12:04:45
Gdy używane jest position:relative
, układ strony będzie występował normalnie przed przesunięciem o top, left
wartości, jednak position:absolutebędzie ignorować przepływ dokumentu. Te relative
będą działać bez zmian, ale bezwzględne muszą być zmienione
.col1, .col2 {display:inline-block;}
EDIT: w zależności od okoliczności, może możesz zawinąć tabelę w absolutny div, a następnie użyć normalnego przepływu dokumentów w tabeli?
<div class="absolute-wrap">
<div class="row">
<div class="col"> </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
2017-05-23 12:02:24