添加css類動態導致不希望後立即

我添加一個CSS動態JavaScript與父div。然後，我嘗試在樣式爲position: absolute的父div內添加一個子div。添加css類動態導致不希望後立即

由於子div是position: absolute我本以爲它會出現在內容之上。我怎樣才能讓它顯示在內容之上？

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <title></title> 
    <style type="text/css"> 
     .parentdiv 
     { 
      border: 1px solid red; 
      height: 100px; 
      width: 150px; 
      overflow: scroll; 
     } 
     .childdiv 
     { 
      position: absolute; 
      border: 1px solid green; 
      height: 10px; 
      width: 15px; 
     } 
    </style> 
</head> 
<body> 
    <form id="form2" runat="server"> 
    <div id="div1" class="test"> 

     <script type="text/javascript"> 
      var strContent = ''; 
      for (var i = 1; i < 21; i++) { 
       document.writeln(i + '<br />'); 
      } 
     </script> 

    </div> 
    </form> 

    <script type="text/javascript"> 

     window.onload = function() { 
      var d1 = document.getElementById('div1'); 
      var strContent = ''; 
      for (var i = 1; i < 11; i++) { 
       strContent += (i + '<br />'); 
      } 
      d1.innerHTML = strContent; 

      d1.className += (' ' + 'parentdiv'); 

      var d2 = document.createElement('div'); 
      d2.className = 'childdiv'; 
      d1.appendChild(d2); 
     }; 
     </script> 

</body> 
</html>

來源

2013-10-25 Rod

您是否還必須給父母一個職位設置？ –

是的，他不得不 –

孩子應該是頂部0px – vals

如果我明白你的問題，你希望孩子成爲父母內隱藏其內容。

當您將position：absolute設置爲某個項目時，它將引用窗口或具有「position：relative」或「position：absolute」的最接近的父項。

此外，您需要爲孩子設置座標。

所以：

設置位置：相對於父
機頂盒：0像素;左：0像素;給孩子
建議：爲孩子創建另一個兄弟姐妹，並把所有的數字。將文字和BR作爲兄弟姐妹放入DIV並不是一個好習慣。

來源

2013-10-25 20:27:59 Yochai

http://jsfiddle.net/w2ucD/4/這就是我我期待着，但一般來說，內容是第一位的。 – Rod

你是第一個什麼意思？在y軸上的z軸上？我的意思是，你希望childdiv出現在數字之後（在y軸上）？或者隱藏在它們下面（在z軸上）？ – Yochai

添加css類動態導致不希望後立即

回答

相關問題