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绝对位置意味着这个元素相对于第一个具有静态位置的父元素定位。

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

所以目前，你的div是根据你的html元素定位的，因此你需要给它的一个父元素另一个位置方法而不是静态然后你会没事的，例如：

#content {
    position: absolute;
}

Answer 3

在position: relative;上设置div.content。

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

当窗口调整大小时，防止div块移动

3 个答案: