How to stop two nested divs with absolute positioning from overlapping each other?
Question
I have a responsiveness issue with the project that I am currently developing
I have a sidebar with two nested divs (the sections that appear "separated" from each other - see preview below) with absolute positioning that are overlapping each other whenever the screen height is lower than the space required to fit all of the elements on screen.
I would like to know how to stop the bottom section from overlapping the top section and make the sidebar's content scrollable from that point (once the "SOUND DETECTION DETAILS" container begins to overlap the "STROBE DURATION" container).
Here's the relevant index.html body section code:
<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"> Integrated Player</option>
<option value="" class="device text-left"> 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>
I am using Tailwind CSS, however, I do understand pure CSS answers as i am able to convert them to Tailwinds fromatting. Thanks!
I have searched for hours trying to find a solution for a problem similar to mine, but with no avail. I have found tutorials with a context similar to mine but the elements' positioning were not of the same type.
1 answers
solution1
0 ACCPTED 2023-02-02 05:44:58
I had tried to remove the absolute position of the divs encapsulating sound detection details and also refactored some of the code. Below is the code shared.
<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"> Integrated Player</option> <option value="" class="device text-left"> ,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>
Note: Since I don't have the styles defined with id like sidebar, so the sidebar appears in the left side.
ALso you can view here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Two divs with position absolute overlapping with each other
Absolute divs stop overlapping - Let them move relative of each other
how to make divs stop overlapping each other
Absolute positioning and overlapping divs
Overlapping divs on absolute positioning
How to avoid overlapping between two divs positioning absolute inside a div positioning relative?
How to stop two divs from pushing each other on window resize
positioning nested divs relative to each other
Positioning multiple nested divs relative to each other
How to postion two centered DIVs overlapping each other and be responsive?
Related Tags