當調整窗口大小時修復圖像位置

Question

我有一個位置固定在頁面中的圖像。當我重新調整瀏覽器的大小時，圖像覆蓋了我的頁面內容，我該如何防止這種情況發生？

<div > 
    <img id="img1" class="wrapperImage"></img> 
</div> 

<style type="text/css"> 
    .wrapperImage 
    { 
    position : fixed; 
    width:200px; 
    height:100px 
    } 
    </style> 

Answer 1

你必須設一箇中心DIV和它position:relative設置和設置您的圖像 position:absolute，在您的中央格，並與z-index你可以改變你要顯示元素的優先級，然後設置z-index:10爲您的圖像。

Answer 2

嘗試添加z-index:-1;到您的CSS。

Answer 3

.wrapperImage { 
     position : fixed; 
     width: 100%; 
     max-width:200px; 
     height:auto 
    } 

以百分比表示的大小可以提高您的responsive design。

JSFIDDLE

Answer 4

你可以做到這一點，圖像將繼續留在，甚至當你調整窗口大小的相同位置，

通過給父標籤相對定位，和孩子點點絕對的立場不會改變，即使調整窗口大小

<div id="divname"> 
    <img id="img1" class="wrapperImage"></img> 
</div> 

<style type="text/css"> 
    .divname{ 
     position:relative; 
    } 

    .wrapperImage 
    { 
    position : absolute; 
    z-index:-1; //depending weather your image should appear 
         at the above or below div change it to +1 or -1 
    top: 100px; 
    right: 100px; 
    width:200px; 
    height:100px 
    } 
    </style>