The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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

Posts in this topic


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: 16th October 2019 - 02:41 PM