當調整窗口大小時阻止div塊移動

我有一個覆蓋在其父div上的div塊，但是當窗口被調整大小時，子div會像瘋了一樣移動。我怎樣才能防止這種情況發生。這裏是鏈接到我的網站：http://raider.grcc.edu/~ryanduffing/recordstore/當調整窗口大小時阻止div塊移動

下面是相關的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; 
}

來源

2013-05-14 Ryan Duffing

你必須讓孩子的絕對相對於其父的位置。

#content { 
    position: relative; 
} 

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

來源

2013-05-14 02:26:19 Arbel

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

然後在#overlayDescription上設置right: 0px;並調整top的值以使其垂直坐在正確的位置。

來源

2013-05-14 02:27:19

這是因爲你給你的孩子div絕對位置意味着這個元素相對於第一個具有非靜態位置的父元素進行定位。

但是從我的網站上可以看到，#overlayDescription div的所有父div都是靜態定位元素，因爲static是默認位置值。

#content { 
    position: absolute; 
}

：

所以目前，您的DIV根據您html元素是你的窗口，所以你需要給其母公司的相互位置的方法，而不是靜態的，那麼你會沒事的，例如定位

來源

2013-05-14 02:33:45 Eli

當調整窗口大小時阻止div塊移動

回答

相關問題