cách định vị số div trong một div

Question

Tôi muốn định vị số div trong div khác.

Sau đây là đoạn có liên quan của 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); 
     } 

và đoạn có liên quan của 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> 

Vấn đề là foo/bar/baz/quux khối được định vị liên quan đến cửa sổ trình duyệt, không phải với phần tử gốc của chúng.

Tôi đang làm gì sai và cách khắc phục?

Answer 1

Thêm position: relative cho phụ huynh .textblock-container div.

Tuyệt đối vị trí các yếu tố được định vị tương đối với cha mẹ vị trí gần nhất của họ (ví dụ như các yếu tố phụ huynh khu vực gần với vị trí của absolute hay relative), vì vậy nếu họ có vị trí không rõ ràng cha mẹ (vị trí mặc định là static) họ sẽ có liên quan đến các cửa sổ.

Answer 2

Hãy thử điều này:

.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); 
} 

Trong thực tế, bạn chỉ cần thêm position: relative propertie cho div cha mẹ.

Answer 3

Trừ khi bạn thêm position: relative; vào bộ điều khiển chính, div sẽ được đặt ở vị trí tuyệt đối của cửa sổ