动态添加 CSS 类会导致紧接着出现不希望的结果

adding css class dynamically results in undesired immediately after

本文关键字：希望 结果 紧接着 CSS 添加 动态      更新时间：2023-09-26

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

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

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

当您将 position：absolute 设置为项目时，它将引用窗口或具有"位置：相对"或"位置：绝对"的最近父项。

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

所以：

  • 设置位置：相对于父项

    • 机顶：0px

  • ;左：0px;给孩子

  • 建议：为孩子创建另一个兄弟姐妹，并输入所有数字。将文本和 BR 作为 DIF 的同级放置不是一个好的做法。

相关文章：