Jak działają pozycje CSS, dlaczego elementy absolutne układają się na siebie zamiast układać jeden po drugim

Question

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;}

Http://jsfiddle.net/wjrNQ/

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 divpojawiać 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ść: (

24

html css css-position

Author: Mr. Alien, 2013-12-21

Source

3 answers

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

2

Author: Olaf Dietsche,
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, leftwartoś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;}

Http://jsfiddle.net/C4bQN/

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>

1

Author: roo2,
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

score 52 · Accepted Answer

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..

Tutaj wpisz opis obrazka

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