0

親divにjavascriptを使用して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