css - 调整窗口大小时防止 div block 移动

Question

我有一个 div block 覆盖在其父 div 之上，但是当窗口调整大小时，子 div 疯狂地四处移动。我怎样才能防止这种情况发生。这是我网站的链接:http://raider.grcc.edu/~ryanduffing/recordstore/

这里是相关的CSS代码和HTML代码:

            <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;
}

Answer 1

你必须让 child 的绝对位置相对于它的 parent 。

#content {
    position: relative;
}

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