Układasz DIV jeden na drugim?

116

Czy można łączyć wiele DIV, takich jak:

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Więc wszystkie te wewnętrzne DIV mają tę samą pozycję X i Y? Domyślnie wszystkie znajdują się poniżej siebie, zwiększając pozycję Y o wysokość ostatniego poprzedniego DIV.

Mam wrażenie, że coś w rodzaju pływaka, wyświetlacza lub innej sztuczki może ugryźć?

EDYCJA: nadrzędny DIV ma pozycję względną, więc użycie pozycji bezwzględnej nie wydaje się działać.

— Wieża
źródło

Aby wyjaśnić moją odpowiedź, chcesz bezwzględnie ustawić wewnętrzne elementy div.

— Matt

Związane z: stackoverflow.com/q/2941189/435605

— AlikElzin-kilaka

168

Umieść zewnętrzne elementy DIV w dowolny sposób, a następnie ustaw wewnętrzne elementy DIV, używając wartości bezwzględnych. Wszystkie się ułożą.

.inner {
  position: absolute;
}

<div class="outer">
   <div class="inner">1</div>
   <div class="inner">2</div>
   <div class="inner">3</div>
   <div class="inner">4</div>
</div>

Rozwiń fragment

— Matt
źródło

1

Wydaje się, że to nie działa. Może powinienem był wspomnieć, że mam taki scenariusz: <div style = "position: bezwzględna ..."> <div style = "position: względna ..."> <div> ułóż ten </div> <div> stos to </div> <div> ułóż to </div> <div> ułóż to </div> </div> </div>

— Wieża

2

Chcesz bezwzględnie ustawić elementy div, które mają w sobie „stack this”. Działa - próbowałem go przed wysłaniem oryginału. Jeśli nie umieścisz selektorów klas w swoich elementach div, dostosuj metodę wyboru div w odpowiedzi Erica, aby wybrać stosy div.

— Matt

1

Dla mnie też nie działa. Widzom pozostało zbyt wiele niewiadomych.

— yan bellavance

Mam elementy div do ułożenia w stos, używając pozycji: względna i określając wysokość

— yan bellavance

może to mieć coś wspólnego z ekspozycją?

— yan bellavance

50

Aby dodać do odpowiedzi Dave'a:

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }

— Eric Wendelin
źródło

Wydaje się, że to nie działa. Może powinienem był wspomnieć, że mam taki scenariusz: <div style = "position: bezwzględna ..."> <div style = "position: względna ..."> <div> ułóż ten </div> <div> stos to </div> <div> ułóż to </div> <div> ułóż to </div> </div> </div>

— Wieża

Myślę, że w takim przypadku chcesz ustawić „top: 0; left: 0;” w Twoim div, który ma „position: relative”. Zdecydowanie przetestuj na tym IE6, chociaż nie mogę powiedzieć na pewno, że zadziała.

— Eric Wendelin

10

Jeśli masz na myśli dosłowne umieszczenie jednego na drugim, jednego na górze (te same pozycje X, Y, ale inna pozycja Z), spróbuj użyć z-indexatrybutu CSS. To powinno działać (nieprzetestowane)

<div>
    <div style='z-index: 1'>1</div>
    <div style='z-index: 2'>2</div>
    <div style='z-index: 3'>3</div>
    <div style='z-index: 4'>4</div>
</div>

Powinno to pokazać 4 na górze 3, 3 na górze 2 i tak dalej. Im wyższy indeks z, tym wyżej element jest umieszczony na osi z. Mam nadzieję, że ci to pomogło :)

— Jimmie Lin
źródło

6

style="position:absolute"

— Dave Swersky
źródło

5

Ustawiłem elementy div z lekkim przesunięciem, abyś mógł zobaczyć, jak działa.
HTML

<div class="outer">
  <div class="bot">BOT</div>
  <div class="top">TOP</div>
</div>

CSS

.outer {
  position: relative;
  margin-top: 20px;
}

.top {
  position: absolute;
  margin-top: -10px;
  background-color: green;
}

.bot {
  position: absolute;
  background-color: yellow;
}

https://codepen.io/anon/pen/EXxKzP

— nycynik
źródło

4

Możesz teraz użyć siatki CSS, aby to naprawić.

<div class="outer">
  <div class="top"> </div>
  <div class="below"> </div>
</div>

A css do tego:

.outer {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.outer > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
.outer .below {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}

— Mojżesz Gitau
źródło

0

Wiem, że ten post jest trochę stary ale miałem ten sam problem i próbowałem go naprawić kilka godzin. Wreszcie znalazłem rozwiązanie:

jeśli mamy 2 pola ustawione na absolutnie

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>

spodziewamy się, że na ekranie będzie jedno pudełko. Aby to zrobić, musimy ustawić margin-bottom równy -height, robiąc to w ten sposób:

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>

dla mnie działa dobrze.

— Krzysztof Jarosz
źródło

0

Miałem te same wymagania, które wypróbowałem poniżej.

#container1 {
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2 {
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}

#container {
position : relative;
height:350px;
width:350px;
background-color:yellow;
}

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview

— Raphael
źródło