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

Question

我有一个覆盖在其父 div 之上的 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

您必须使孩子相对于其父母的绝对位置。

#content {
    position: relative;
}

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

Answer 2

这是因为你给你的孩子 div 绝对位置意味着这个元素是相对于第一个父元素定位的，它的位置不是静态的。

但正如我从您的网站上看到的那样，您的 div 的所有父#overlayDescriptiondiv 都是静态定位元素，因为static它是默认位置值。

因此，目前，您的 div 是根据html您的窗口元素定位的，因此您需要为其父元素之一提供另一个位置方法，而不是静态方法，然后就可以了，例如：

#content {
    position: absolute;
}

Answer 3

设置position: relative;为div.content。

然后设置right: 0px;并#overlayDescription调整top值以使其垂直放置在正确的位置。