Question

我正在使用javascript动态地将css类添加到父div。然后，我尝试在父div中添加一个子div，其格式为position: absolute。

由于子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>

Answer 1

如果我理解了您的问题，您希望孩子在父母中并隐藏其内容。

当你将position：absolute设置为一个项目时，它将引用窗口或具有“position：relative”或“position：absolute”的最近父项。

此外，您需要为孩子设置坐标。

所以：

设置位置：相对于父
设置顶部：0px;左：0像素;给孩子
推荐：为孩子创建另一个兄弟姐妹并将所有数字放在那里。将文本和BR作为兄弟姐妹放在DIV上并不是一个好习惯。

动态添加css类会立即产生不希望的结果

1 个答案: