如何將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>

的問題是，所述富/酒吧/巴茲/ QUUX塊被定位相對於瀏覽器窗口，而不是它們的父元素。

我在做什麼錯，我該如何解決？

來源

2013-07-12 Jason S

將position: relative添加到父母.textblock-container div。

絕對定位元件相對於它們的最近定位的父（例如具有absolute或relative的位置最近的父元素）被定位，因此，如果它們沒有明確地定位父母（默認位置是static），他們將是相對於所述窗口。

來源

2013-07-12 17:10:19 Ennui

沒問題，工作正常。爲什麼？ –

添加了一個簡要說明:) – Ennui

當涉及到偏移值（'top'，'bottom'，'left'，'right' properties）時，絕對定位的元素將相對於其最接近的位置的左上角parent，而一個相對定位的元素相對於它在頁面流中的原始位置是偏移的（只是爲了理解位置：相對於絕對定位的後代的'錨'位置之外的目的）@JasonS – Ennui

試試這個：

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

其實，你只需要添加position: relative propertie父DIV。

來源

2013-07-12 17:11:29

除非您將position: relative;添加到父控制器，div將被定位在窗口的絕對位置

來源

2013-07-12 17:34:54

如何將div放在另一個div中

回答

相關問題