他のdiv内にdivを配置する方法

Question

別のdiv内にdivを配置する必要があります。

ここでは、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); 
     } 

と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> 

問題がfoo /バー/バズ/ quuxブロックが配置されているということですブラウザウィンドウに対して、親要素には相対的ではありません。

私は間違っていますが、どうすれば修正できますか？

Answer 1

position: relativeを親の.textblock-container divに加える。

絶対配置要素は、その最も近い位置の親（absoluteまたはrelativeの位置に例えば最も近い親要素）に対して配置されているので、彼らは何も明示的に配置され、両親を（デフォルトの位置はstaticで）持っていない場合、彼らはからの相対になります窓。

Answer 2

はこれを試してみてください：

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

は、実際には、あなただけの親のdivのためposition: relative propertieを追加する必要があります。あなたが親コントローラにposition: relative;を追加しない限り

Answer 3

divが働い