Javascript 动态添加css类会立即导致不希望的结果_Javascript_Css

Javascript 动态添加css类会立即导致不希望的结果

javascript css

Javascript 动态添加css类会立即导致不希望的结果,javascript,css,Javascript,Css,我正在用javascript动态地向父div添加一个css类。然后，我尝试在父div中添加一个子div，其样式为position:absolute 因为child div是position:absolute，所以我希望它显示在内容上方。我怎样才能让它显示在内容上方 .parentdiv { 边框：1px纯红；高度：100px；宽度：150px；溢出：滚动； } childdiv先生 { 位置：绝对位置；边框：1px纯绿色；高度：10px；宽度：15px； } var strC

我正在用javascript动态地向父div添加一个css类。然后，我尝试在父div中添加一个子div，其样式为

position:absolute

因为child div是

position:absolute

，所以我希望它显示在内容上方。我怎样才能让它显示在内容上方


.parentdiv
{
边框：1px纯红；
高度：100px；
宽度：150px；
溢出：滚动；
}
childdiv先生
{
位置：绝对位置；
边框：1px纯绿色；
高度：10px；
宽度：15px；
}
var strContent=''；
对于（变量i=1；i<21；i++）{
文件写入（i+“
”）；
}
window.onload=函数（）{
var d1=document.getElementById（'div1'）；
var strContent=''；
对于（变量i=1；i<11；i++）{
strContent+=（i+'
'）；
}
d1.innerHTML=strContent；
d1.className+=（“”+'parentdiv'）；
var d2=document.createElement（'div'）；
d2.className='childdiv'；
d1.儿童（d2）；
};

如果我理解了你的问题，那么你希望孩子在父对象中并隐藏其内容

当您将position:absolute设置为项目时，它将引用窗口或具有“position:relative”或“position:absolute”的最近父项

此外，还需要为子对象设置坐标

因此：

设置位置：相对于父对象
机顶盒：0px；左：0px；给孩子
建议：为孩子创建另一个兄弟姐妹，并将所有数字放在那里。将文本和BR作为同级放入div不是一个好的做法

您不必给家长一个位置设置吗？孩子应该在上面的0px上，意思是确切的位置？您应该将顶部和左侧的值添加到子元素中，以便将其精确放置在您希望的位置。没有顶部/左侧值的绝对元素仅与文档流一起定位，在本例中，位于父div之后（或在第二个示例中位于所有-br-之后）。如果您的意思是位于父层的顶部（背景中的父div，前景中的子div）然后你必须使用

z-index

这是我所期望的，但通常内容是第一位的。你说的第一位是什么意思？在z轴上在y轴上？我的意思是，你想让childdiv出现在数字后面（在y轴上）？或者隐藏在它们下面（在z轴上）？

<%@ 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>