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

css html stack css-float 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

Układasz DIV jeden na drugim?

Odpowiedzi: