爲什麼第二個div顯示在它之前的第一個div下面？

我有以下情況（我無法發佈在線小提琴，因爲它是使用Struts 2標籤的JSP的渲染結果）。在一個頁面我有這樣的事情：爲什麼第二個div顯示在它之前的第一個div下面？

<td id="rightColumn" width="66.6%"> 
    <div id="resultEvents" class="class java.util.HashMap"> 
     <table class="contacts" width="100%"> 
      <tbody> 
       <tr>.....</tr> 
       <tr>.....</tr> 
       <tr>.....</tr> 
       <tr>.....</tr> 
       <tr>.....</tr> 
      </tbody> 
     </table> 

     <br> 

    </div> 

    <div id="wwctrl_submitButton" align="right" style="display: block"> 
     <input id="submitButton" type="submit" style="" onclick="return validateForm();" value="Submit" name="action:projectCreationAction"> 
    </div> 
</td>

這是所獲得的結果是：

enter image description here

正如你所看到的問題是，提交由內容所表述按鈕此div：

<div id="wwctrl_submitButton" align="right" style="display: block"> 
    <input id="submitButton" type="submit" style="" onclick="return validateForm();" value="Submit" name="action:projectCreationAction"> 
</div>

出現在其以前的div下（該div有ID = resultEvents）

這是與以前的HTML代碼片段的CSS：

#treeFormContainer { 
    min-height: 250px; 
} 

#rightColumn { 
    position: relative; 
} 

#resultEvents { 
    position: absolute; 
    top: 0; 
}

如何防止這種行爲，顯示了具有ID = 「wwctrl_submitButton」以前的DIV下的div有id =「resultEvents」？

我錯過了什麼？我該如何解決這個問題？

TNX

來源

2015-01-14 AndreaNobili

我沒有在你的代碼中看到任何對** z-index **的引用？ – jbutler483

http://www.w3.org/TR/CSS2/zindex.html#painting-order – Alohci

順便說一下，您的代碼存在問題。例如，'width'屬性在使用小數百分比時，在瀏覽器之間是不兼容的。使用'樣式'。這應該是XHTML，對吧？然後使用'
'，而不是'
'。 –

-2

添加此CSS替換的絕對位置：

#resultEvents { 
    position: relative; 
    top: 0; 
}

來源

2015-01-14 11:46:45 anji

我不能!!!我需要它將其錨定在其頂部位置：相對容器 – AndreaNobili

相對不能與頂級屬性一起使用。 –

@MohammedHâmzã 這是不正確的。位置：相對 - '頂部'，'右'，'底部'和'左'屬性適用。更多關於W3C的信息：http://www.w3.org/wiki/CSS/Properties/position –

難沒有擺弄身邊打球。但是我可以看到一個封閉的TD標籤，你的表和div關閉後。嘗試刪除它，因爲它可能會影響佈局。

來源

2015-01-14 12:29:13 Creaven

OP的代碼還包含您提到的td的開始標記，位於最頂端。 –

如果你的問題是爲什麼wwctrl_submitButton div直到表結束後纔開始，那是因爲resultEvents div絕對定位，所以wwctrl_submitButton div被繪製在它將被繪製的位置，如果第一格完全沒有出現。

解決方案：手動將div放在表格下方的位置，例如position:absolute和top的值至少與表格的高度一樣大。
或者，如果您可以更改HTML，請將第二個div直接放在表格的後面，第一個div內。

或者，如果您的問題是爲什麼表格繪製在wwctrl_submitButton div的頂部，則帶有position:absolute的元素繪製在沒有定位的元素上。

所以那麼解決方案也會給wwctrl_submitButton也，例如position:relative，沒有做任何事情。

來源

2015-02-03 09:30:22

爲什麼第二個div顯示在它之前的第一個div下面？

回答

相關問題