The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to keep div in same relative position within another
dschatt777
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 3 2019, 12:18 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,181
Joined: 10-August 06
Member No.: 7



QUOTE(dschatt777 @ May 3 2019, 05:41 PM) *

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".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 4 2019, 04:13 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,313
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd July 2019 - 08:09 PM