从当窗口调整大小移动防止DIV块(Prevent div block from moving whe

我有一个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的#overlayDescription格是静态定位的元素，因为static是默认位置值。

所以现在，你的DIV根据您定位html这是你的窗口，所以你需要给其母公司的相互位置的方法，而不是静态的，那么你会没事的，例如元素：

#content {
    position: absolute;
}

Answer 3:

设置position: relative; 上div.content 。

然后设置right: 0px; 在#overlayDescription并调整top价值得到它在正确的位置坐垂直。

文章来源: Prevent div block from moving when window resized