dlaczego div zwija się z pozycjonowaniem względnym/absolutnym?

Zajmowałem się dzieleniem elementów na ich zawartość podczas korzystania z pozycjonowania zmiennoprzecinkowego (na przykład rozwiązywanie z przepełnieniem: ukryte), ale próbuję nauczyć się bezwzględnego/względnego pozycjonowania i nie mogę się domyślić, dlaczego pojemnik div się zawala. Mój test:dlaczego div zwija się z pozycjonowaniem względnym/absolutnym?

<html> 
    <head> 
    <style type="text/css"> 
     body { 
     background-color:#eee; 
     } 

     #content { 
     margin:0 auto; 
     position:relative; 
     border:1px solid red; 
     width:800px; 
     display:block; 
     background-color:white; 
     } 

     #header { 
     border:1px solid black; 
     background-color:#777; 
     color:white; 
     width:800px; 
     position:absolute; 
     left:0; 
     top:0; 
     } 

     #leftcol { 
     position:absolute; 
     border:1px solid black; 
     background-color:#ddd; 
     width:200px; 
     top:100px; 
     left:0; 
     } 

     #rightcol { 
     position:absolute; 
     top:100px; 
     left:205px; 
     border:1px solid black; 
     background-color:#ddd; 
     width:500px; 
     } 

    </style> 
    <title>CSS Positioning Example 1</title> 
    </head> 

    <body> 
    <div id="content"> 

     <div id="header"> 
     <h1>The Awesome Website</h1> 
     </div> 

     <div id="leftcol"> 
     <h2>About</h2> 
     <p> 
     This website is so awesome because it was made by someone 
     and that is really all there is to it. There. 
     </p> 
     </div> 

     <div id="rightcol"> 
     <p>This is where I'm going to put some real body text so that it goes 
     on and on for a while and so I can get a sense of what happens when 
     the text in the paragraph keeps going and the box containing it keeps 
     going on as well. 
     </p> 
     </div> 

    </div> 

    </body> 
</html>

Co tu się dzieje? Dlaczego element div z czerwoną ramką zapada się, mimo że zawiera inne elementy div?

Źródło

2011-09-20 mix

JSBin: http://jsbin.com/exukoc – Mohsen

Dzieje się tak, ponieważ cała jego zawartość ma styl position:absolute. To zabiera te elementy z przepływu i (układowo) jest tak, jakby nawet nie istniały. Rozważ użycie pozycji position:relative.

Źródło

2011-09-20 03:35:38

ty dla poprawek ortograficznych i gramatycznych, @sscirrus. jest późno. : P –

Myślałem, że celem użycia elementów pozycjonowanych bezwzględnie jest umieszczenie ich we względnie położonym przodku? Czy pozycja nie jest absolutna względem jej przodka? – mix

@Joseph - oczywiście! Dobra odpowiedź i +1 ode mnie. – sscirrus

Naprawdę trzeba czytać te artykuły na listę Poza

CSS Positioning 101

CSS Floats 101

Twoje pytanie jest dlaczego div z czerwonymi granic nie powiększy się jego zawartość. Jak powiedział Joseph, problem polega na tym, że usuwasz elementy z obiegu dokumentów. Pozycjonowanie elementu absolutnie uniezależnia pozycję elementu od jego rodzica i rodzeństwa.

Naprawiłem twój kod przy użyciu CSS float property. Spójrz na here.

Gorąco polecam przeczytanie tych artykułów.

Źródło

2011-09-20 03:44:14 Mohsen

thx za świetne linki. całkowicie pomogło. – mix

dlaczego div zwija się z pozycjonowaniem względnym/absolutnym?

Odpowiedz

Powiązane problemy