如何阻止两个具有绝对定位的嵌套 div 相互重叠？

Question

我目前正在开发的项目存在响应问题

我有一个带有两个嵌套 div 的侧边栏（看起来彼此“分开”的部分 - 请参见下面的预览），只要屏幕高度低于适合屏幕上所有元素所需的空间，它们就会相互重叠.

重叠元素

我想知道如何阻止底部与顶部重叠并使侧边栏的内容从该点开始滚动（一旦“声音检测细节”容器开始与“STROBE DURATION”容器重叠）。

这是相关的 index.html 正文部分代码：

<body class="bg-black">
    <div id="sidebar">
        <div id="sidebar-container" class="py-1.5 bg-gray-300 w-400px h-full absolute z-1 overflow-x-hidden opacity-100">
            <div id="sidebar-logo" class="w-[300px] mx-auto">
                <img class="" src="assets\img\logo-V2\logo-horizontal-black.png">
            </div>

            <hr class="w-[375px] border border-solid border-zinc-700 mx-auto">

            <h3 class="text-center py-3 text-xl text-gray-600 font-semibold">STROBE SYNC MODE</h3>

            <div id="auto-manual-container" class="w-[330px] ml-35px flex justify-between">
                <button id="auto" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="autoMode()">AUTO</button>
                <button id="manual" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="manualMode();">MANUAL</button>
            </div>

            <hr class="w-[375px] border border-solid border-zinc-700 mx-auto">

            <div id="auto-mode-container" class=""> <!-- "AM" stands for "Auto Mode" -->
                <div id="input-device-container" class="w-[330px] ml-35px">
                    <h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">INPUT DEVICE</h5>

                    <select id="select-input-device" class="w-full h-10 mb-5 flex mx-auto bg-white rounded outline-none font-semibold text-center text-gray-700" required>
                        <option value="" selected disabled hidden>SELECT DEVICE</option>
                        <option value="" class="device text-left">&nbsp;Integrated Player</option>
                        <option value="" class="device text-left">&nbsp;Example Device</option>
                    </select>
                </div>

                <div id="frequency-range-focus-container" class="w-[330px] ml-35px">
                    <h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">FREQUENCY RANGE FOCUS</h5>

                    <div id="low-mid-high-container" class="w-full flex justify-between">
                        <button id="low" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-themeOrange selected" onclick="low_Btn()">LOW</button>
                        <button id="mid" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="mid_Btn()">MID</button>
                        <button id="high" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="high_Btn()">HIGH</button>
                    </div>
                    <button id="master" class="w-full h-12 mb-3 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="master_Btn()">MASTER</button>
                </div>

                <div id="detection-sensitivity-container" class="w-[330px] ml-35px">
                    <h5 id="sens-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5>

                    <div id="sens-slider-container" class="w-full">
                        <input type="range" min="0" max="100" value="50" class="sens-slider w-full" id="sens-slider">
                        <p class="float-left font-regular text-sm text-gray-600">0</p>
                        <p class="float-right font-regular text-sm text-gray-600">100</p>
                    </div>
                </div>

                <br>

                <div id="strobe-duration-container" class="w-[330px] ml-35px">
                    <h5 id="AM-duration-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5>

                    <div id="duration-slider-container" class="duration-slider-container">
                        <input type="range" min="10" max="1000" value="200" class="duration-slider w-full" id="AM-duration-slider">
                        <p class="float-left font-regular text-sm text-gray-600">10</p>
                        <p class="float-right font-regular text-sm text-gray-600">1000</p>
                    </div>
                </div>

                <br>

                <div id="sound-detection-details-container" class="w-[330px] ml-35px absolute bottom-[75px]">
                    <h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">SOUND DETECTION DETAILS</h5>

                    <div id="SDD-container" class="w-full h-40 px-4 bg-white rounded flex flex-col justify-evenly">
                        <div id="SCT-container" class="w-full">
                            <h4 class="float-left font-semibold text-base text-gray-600">SOUND COME THROUGH</h4>
                            <label id="SCT-check-container" class="float-right">
                                <input type="checkbox" checked disabled> <!-- only check when audio coming trough, change with javascript -->
                                <span class="SCT-checkmark"></span>
                            </label>
                        </div>

                        <hr>
                        
                        <div id="tempo-container" class="w-full">
                            <h4 class="float-left font-semibold text-base text-gray-600">TEMPO:</h4>
                            <h4 id="bpm" class="float-right font-semibold text-base text-gray-600">150BPM</h4> <!-- change with javascript -->
                        </div>

                        <hr>
                        
                        <div id="audio-meter-container" class="w-full">
                            <h4 class="float-left font-semibold text-base text-gray-600">AUDIO METER</h4>
                            <label id="AM-check-container" class="float-right"><!-- in this context "AM" stands for "Audio Meter" -->
                                <input type="checkbox">
                                <span class="AM-checkmark"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <br>

                <div id="AM-on-off-container" class="w-[330px] ml-35px flex justify-between absolute bottom-0">
                    <button id="AM-off" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="AM_turnOff()">OFF</button>
                    <button id="AM-on" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="AM_turnOn();">ON</button>
                </div>
            </div>
        </div>
    </div>
</body>

我正在使用 Tailwind CSS，但是，我确实理解纯粹的 CSS 答案，因为我能够将它们从 atting 转换为 Tailwinds。 谢谢！

我已经搜索了几个小时，试图找到与我类似的问题的解决方案，但无济于事。 我找到了与我的上下文相似的教程，但元素的定位不是同一类型。

Answer 1

我曾尝试删除封装声音检测细节的div的absolute position，并重构了一些代码。 下面是分享的代码。

 <script src="https://cdn.tailwindcss.com"></script> <body class="bg-black"> <div id="sidebar"> <div id="sidebar-container" class="py-1.5 bg-gray-300 w-400px h-full absolute z-1 overflow-x-hidden opacity-100 overflow-y-scroll flex-col justify-center items-center"> <div id="sidebar-logo" class="w-[300px] mx-auto"> <img class="" src="assets\img\logo-V2\logo-horizontal-black.png"> </div> <hr class="w-[375px] border border-solid border-zinc-700 mx-auto"> <h3 class="text-center py-3 text-xl text-gray-600 font-semibold">STROBE SYNC MODE</h3> <div id="auto-manual-container" class="w-[330px] mx-[35px] flex justify-between"> <button id="auto" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="autoMode()">AUTO</button> <button id="manual" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="manualMode();">MANUAL</button> </div> <hr class="w-[375px] border border-solid border-zinc-700 mx-auto"> <;-- "AM" stands for "Auto Mode" --> <div id="input-device-container" class="w-[330px] mx-[35px]"> <h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">INPUT DEVICE</h5> <select id="select-input-device" class="w-full h-10 mb-5 flex mx-auto bg-white rounded outline-none font-semibold text-center text-gray-700" required> <option value="" selected disabled hidden>SELECT DEVICE</option> <option value="" class="device text-left">&nbsp;Integrated Player</option> <option value="" class="device text-left">&nbsp,Example Device</option> </select> </div> <div id="frequency-range-focus-container" class="w-[330px] mx-[35px]"> <h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">FREQUENCY RANGE FOCUS</h5> <div id="low-mid-high-container" class="w-full flex justify-between"> <button id="low" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-themeOrange selected" onclick="low_Btn()">LOW</button> <button id="mid" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="mid_Btn()">MID</button> <button id="high" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="high_Btn()">HIGH</button> </div> <button id="master" class="w-full h-12 mb-3 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="master_Btn()">MASTER</button> </div> <div id="detection-sensitivity-container" class="w-[330px] mx-[35px]"> <h5 id="sens-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5> <div id="sens-slider-container" class="w-full"> <input type="range" min="0" max="100" value="50" class="sens-slider w-full" id="sens-slider"> <p class="float-left font-regular text-sm text-gray-600">0</p> <p class="float-right font-regular text-sm text-gray-600">100</p> </div> </div> <br> <div id="strobe-duration-container" class="w-[330px] mx-[35px]"> <h5 id="AM-duration-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5> <div id="duration-slider-container" class="duration-slider-container"> <input type="range" min="10" max="1000" value="200" class="duration-slider w-full" id="AM-duration-slider"> <p class="float-left font-regular text-sm text-gray-600">10</p> <p class="float-right font-regular text-sm text-gray-600">1000</p> </div> </div> <br> <div id="sound-detection-details-container" class=" w-[330px] mt-28 mx-[35px] bottom-[75px]"> <h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">SOUND DETECTION DETAILS</h5> <div id="SDD-container" class="w-full h-40 px-4 bg-white rounded flex flex-col justify-evenly"> <div id="SCT-container" class="w-full"> <h4 class="float-left font-semibold text-base text-gray-600">SOUND COME THROUGH</h4> <label id="SCT-check-container" class="float-right"> <input type="checkbox" checked disabled> <:-- only check when audio coming trough; change with javascript --> <span class="SCT-checkmark"></span> </label> </div> <hr> <div id="tempo-container" class="w-full"> <h4 class="float-left font-semibold text-base text-gray-600">TEMPO:</h4> <h4 id="bpm" class="float-right font-semibold text-base text-gray-600">150BPM</h4> <!-- change with javascript --> </div> <hr> <div id="audio-meter-container" class="w-full"> <h4 class="float-left font-semibold text-base text-gray-600">AUDIO METER</h4> <label id="AM-check-container" class="float-right"><!-- in this context "AM" stands for "Audio Meter" --> <input type="checkbox"> <span class="AM-checkmark"></span> </label> </div> </div> </div> <br> <div id="AM-on-off-container" class=" w-[330px] mx-[35px] flex justify-between bottom-0"> <button id="AM-off" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="AM_turnOff()">OFF</button> <button id="AM-on" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="AM_turnOn();">ON</button> </div> </div> </div> </body>

注意：由于我没有像侧边栏那样用 id 定义的 styles，所以侧边栏出现在左侧。

也可以在这里查看