How to keep div in same relative position within another |
How to keep div in same relative position within another |
dschatt777 |
May 3 2019, 10:41 AM
Post
#1
|
Group: Members Posts: 1 Joined: 3-May 19 Member No.: 26,890 |
hi, I'm trying to display a close button (an "X", id="closeDiv" in the code below) that always stays in the same position within its parent, the associated popup box. I can adjust the initial position of the "X" to where I want it, but when I change the size of the browser window, the "X" floats relative to the popup box. I've set the closeDiv to position:relative and then a bottom:5px. My understanding is that it should then always position itself 5px from the bottom of its parent. But that's not what I see, as I said it floats around. Appreciate any help. Thanks
CODE #closeDiv { position: relative; bottom: 5px; } .modal { display: none; position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 8px; border-radius: 15px; border-style: solid; border-width: 2px; left: 200px; top: 200px; background-color: rgb(255,255,255); width: 50%; /* Full width */ height: 50%; /* Full height */ } .close { color: #aaaaaa; font-size: 36px; font-weight: bold; } <div id="chartModal" class="modal"> <div id="chartTitle">Water Elevation vs. Time</div> <br> <div id="chartDiv" style="height: 400px;"></div> <div id="closeDiv"><span class="close">×</span></div> </div> |
Lo-Fi Version | Time is now: 25th April 2024 - 10:27 PM |