Prevent div block from moving when window resized

问题

I have a div block that overlays on top of its parent div, but when the window is resized, the child div moves around like crazy. How can I prevent that from happening. Here is the link to my site: http://raider.grcc.edu/~ryanduffing/recordstore/

Here is the relevant CSS code, and HTML code:

            <div id="overlayDescription" class="my_corner">
                <span id="overHeader"><span id="chevron">&#187;</span>THE CORNER</span>
                <span id="overHeader2">RECORD SHOP</span>
                <p id="overContent"></p>
            </div>
            <div id="pictureBox">
                <img src="img/storefront.jpg" />
            </div>

#pictureBox{
    margin-top: 10px;
    margin-left:auto;
    margin-right:auto;
    width: 940px;
    height: 420px;
    position: relative;
    z-index: 1;
}

#overlayDescription{
    font-size: 11px;
     position:absolute;
    top: 290px;
    right: 489px;
    height: 265px;
    border: 1px solid #FFFFFF;
    width: 240px;
    color: #FFFFFF;
    background-color:rgba(0,0,0,.9);
    z-index: 2;
    border-radius: 100px 0 0 0;
}

#overlayDescription span#overHeader{
    font-family: Arial Narrow;
    position:relative;
    font-size: 25px;
    left: 80px;
    top: 10px;
}

#overlayDescription span#chevron{
    position:relative;
    left: -5px;
    font-family: Arial Narrow;
    font-size: 35px;
    color: yellow;
}

#overlayDescription span#overHeader2{
    font-family: Arial Narrow;
    color: yellow;
    position:relative;
    top: 10px;
    left: 80px;
    font-size: 25px;
}

#overlayDescription p#overContent{
    position:absolute;
    padding-left: 25px;
}

回答1:

You have to make the child's absolute position relative to its parent.

#content {
    position: relative;
}

#overlayDescription {
    top: 140px;
    right: 327px;
    /* rest of the styles for this element */
}

回答2:

It's because you give your child div absolute position means that this element is positioned relative to the first parent element that has a position other than static.

But as I can see from your website, all parent divs of your #overlayDescription div are static positioned element since static is the default position value.

So currently, your div are positioned according to your html element which is your window so you need to give one of its parent another position method rather then static then you'll be fine, for example:

#content {
    position: absolute;
}

回答3:

Set position: relative; on div.content.

Then set right: 0px; on #overlayDescription and adjust the top value to get it to sit in the right spot vertically.

来源：https://stackoverflow.com/questions/16534123/prevent-div-block-from-moving-when-window-resized

标签

css

html

resize