Przepisuję wszystko i odchodzę od bezwzględnych pozycji, a zamiast tego używam pływaków do ustawiania rzeczy tak, jak chcę.W jaki sposób mogę mieć wiele stosów Div jeden na drugim używając Float, a nie pozycjonowania absolutnego?

Pytanie brzmi teraz, w jaki sposób mogę ułożyć wiele elementów div jeden na drugim? Użytkownik będzie mógł w jakiś sposób przełączać się między tymi elementami.

Dzięki

Edycja: Powód ja odchodząc od absolutnej pozycji jest to, że chcę, aby moje div wciąż być dzieckiem swojego rodzica. tj. jeśli mój div zostanie przedłużony, chcę, aby również div został rozszerzony.

Źródło

2012-01-24 Roozbeh15

Masz na myśli nakładanie się? Możesz użyć ujemnego marginesu - pozostawionego dla elementów po pierwszym ... – mowwwalker

Jeśli "na wierzchu" oznacza "nakładanie się", a użytkownik w jakiś sposób przełącza się między elementami div tak, że tylko jeden jest rzeczywiście widoczny na raz, czy nie ustaw wszystkie oprócz prądu na "display: none"? – nnnnnn

nn ... twoja odpowiedź ma sens. Użytkownik może zobaczyć po jednym div na raz, jeśli zmienię wyświetlanie z none na block i na odwrót, mój problem zostanie rozwiązany. Jeśli uznasz to za odpowiedź, zaakceptuję to. – Roozbeh15

Unoszenie się nie zachodzi na inne pływające obiekty w tym samym pojemniku. Zobacz here, aby zobaczyć przykład trzech kolejnych obiektów pływających, aby zobaczyć, jak się nie nakładają.

Jeśli chcesz, aby obiekty się nakładały, będziesz potrzebować/musisz użyć pozycjonowania absolutnego. Możesz użyć pozycjonowania względem obiektu nadrzędnego, ustawiając obiekt nadrzędny na position:relative;, a element potomny na position: absolute;. Zobacz here dla przykładu nakładających się obiektów z pozycją bezwzględną względem elementu nadrzędnego.

Jeśli próbujesz wyświetlić tylko jeden z tych obiektów w danym momencie, po prostu ustaw nie wyświetlane obiekty na display: none i nie zajmą one miejsca w układzie strony. Nie będziesz musiał używać pozycjonowania swobodnego ani bezwzględnego.

Źródło

2012-01-24 02:36:47 jfriend00

Powód, dla którego nie chcę używać pozycji: absolutny; jest to, że chcę, aby div nadal był dzieckiem swojego rodzica; to znaczy, jeśli rozmiar mojego div rozwija się, chcę, aby rodzic również się rozwinął. – Roozbeh15

@ Roozbeh15 - Jeśli umieścisz to w swoim pytaniu, aby opisać PRAWDZIWY problem, który próbujesz rozwiązać, być może możesz uzyskać odpowiedź na swoje prawdziwe pytanie. Proponuję teraz edytować swoje pytanie, aby opisać, co naprawdę chcesz zrobić. – jfriend00

@ Roozbeh15 - poza tym, float nie powoduje, że rodzic ma taki rozmiar, więc istnieją dwa powody, dla których float nie rozwiąże problemu, jak można zobaczyć tutaj: http://jsfiddle.net/jfriend00/xH6Kb/ . – jfriend00

-1

Możesz użyć float: left;, ale osobiście łatwiej jest użyć display: inline-block; zamiast tego.

Źródło

2012-01-24 02:35:23

Element pływający nie pokrywa się z innym obiektem pływającym w tym samym kontenerze. Zobacz [tutaj] (http://jsfiddle.net/jfriend00/JKYnF/) przykład trzech pływających obiektów z rzędu. – jfriend00

jestem niedoświadczony w selektorów CSS, ale jestem pewien, że można znaleźć coś, co działa lepiej niż nazywanie każdej klasy szczególności:

http://jsfiddle.net/aJqb2/

HTML:

<div class="over1"></div> 
<div class="over2"></div> 
<div class="over3"></div>

CSS:

div{ 
    height:50px; 
    width:150px; 

    float:left; 
} 
.over1{ 
    background-color:blue; 
} 
.over2{ 
    margin-top:10px; 
    margin-left:-10px; 
    background-color:green; 
} 
.over3{ 
    margin-top:20px; 
    margin-left:-10px; 
    background-color:orange; 
}

Źródło

2012-01-24 02:42:30 mowwwalker

Nie widzę sposobu, w jaki użytkownicy będą zmieniać zakład we wszystkich DIV bez użycia JavaScript.

Być może zostaw pierwszy element div z domyślnym układem statycznym i nie wyświetlaj dla pozostałych. Użyj JavaScript, aby wyświetlić tylko jeden div na raz.

Źródło

2012-01-24 13:21:58 dave

To jest dokładnie poprawne! – Roozbeh15

W jaki sposób mogę mieć wiele stosów Div jeden na drugim używając Float, a nie pozycjonowania absolutnego?

Odpowiedz

HTML:

CSS:

Powiązane problemy