Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ How to keep div in same relative position within another

Posted by: dschatt777 May 3 2019, 10:41 AM

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>

Posted by: Christian J May 3 2019, 12:18 PM

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".

Posted by: pandy May 4 2019, 04:13 AM

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