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> |
Christian J |
May 3 2019, 12:18 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
when I change the size of the browser window, the "X" floats relative to the popup box. That shouldn't happen if the parent is positioned fixed. QUOTE 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. No, you probably want "position: absolute". |
pandy |
May 4 2019, 04:13 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Yes. 'relative' positions the box relative to where it would have been hadn't it been positioned. 'absolute' positions it relative its containing block. What the containing block is may vary depending on context and is a little tricky to get your head around, but in your case it clearly is the containing DIV since that is positioned.
http://www.w3.org/TR/CSS2/visuren.html#propdef-position |
Lo-Fi Version | Time is now: 25th April 2024 - 12:40 PM |