0

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

由于子 div 是position: absolute我希望它显示在内容之上。我怎样才能让它显示在内容之上？

演示1

演示2

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

1 回答 1

0

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

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

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

所以：

  • 设置位置：相对于父级

  • 置顶：0px；左：0px；给孩子

  • 推荐：为孩子创建另一个兄弟姐妹并将所有数字放在那里。将文本和 BR 作为 DIV 的兄弟姐妹并不是一个好习惯。

于 2013-10-25T20:27:59.347 回答