jak pozycjonować divs w innym dziale

Question

Chcę umieścić div w innym div.

Oto odnośny fragment CSS (full example on cssdesk):

 .textblock-container { 
      width: 500px; 
      height: 500px; 
      border: 1px solid red; 
     } 
     div.textblock { 
      width: 100px; 
      height: 100px; 
      line-height: 100px; 
      border: 1px solid black; 
      position: absolute; 
      text-align: center;    
      background: rgb(0, 150, 0); /* Fall-back for browsers that don't 
           support rgba */ 
      background: rgba(0, 150, 0, .5); 
     } 

i odpowiedni fragment HTML:

<div id='blockdiv1' class='textblock-container'> 
     <div id='blockdiv2' class='textblock'><span>foo (NW)</span></div> 
     <div id='blockdiv3' class='textblock'><span>bar (NE)</span></div> 
     <div id='blockdiv4' class='textblock'><span>baz (SW)</span></div> 
     <div id='blockdiv5' class='textblock'><span>quux (SE)</span></div> 
    </div> 

Problemem jest to, że foo/bar/baz/quux bloki są ustawione względem okna przeglądarki, a nie do elementu nadrzędnego.

Co robię źle i jak mogę to naprawić?

Answer 1

Dodaj position: relative do jednostki nadrzędnej .textblock-container div.

Absolutnie umieszczone elementy są umieszczone w stosunku do ich najbliższego umieszczonej rodzica (np najbliższego elementu nadrzędnego z pozycji absolute lub relative), więc jeśli nie mają one wyraźnie umieszczony rodziców (domyślnie pozycja jest static) będą w stosunku do okno.

Answer 2

Spróbuj tego:

.textblock-container { 
width: 500px; 
height: 500px; 
border: 1px solid red; 
position: relative; 
} 

div.textblock { 
width: 100px; 
height: 100px; 
line-height: 100px; 
border: 1px solid black; 
position: absolute; 
text-align: center;    
background: rgb(0, 150, 0); 
background: rgba(0, 150, 0, .5); 
} 

W rzeczywistości, po prostu trzeba dodać position: relative propertie dla div nadrzędnej.

Answer 3

ile dodasz position: relative; do kontrolera nadrzędnego div zostanie umieszczony bezwzględna oknie