圖像走出去的容器

Question

我有一個圖像，我想重疊的橫幅，但我有一個問題，當我重新調整窗口的圖像不會隨着它移動。我提供了一個截圖和我的CSS。

CSS：

.coslogo { 
    display: block; 
    margin: -150px auto 0; 
    top: 150%; 
    /*padding: 20px;*/ 
    width: 100%; 
    left: 50%; 
    margin-left: 590px; 
    z-index: 9; 
} 

.coslogo img { 
    overflow: auto; 
} 

Answer 1

看起來你有你的位置設置爲絕對的，因爲你是如何定位的重疊旗幟。您需要將position:relative;添加到.coslogo的css中。沒有html，我不能更具體，所以包括，如果這沒有幫助！

Answer 2

您可以使用css relative和absolute與z-index進行定位，以將圖像放在另一個上。

.main { 
 
    border: 1px solid #000; 
 
    position: relative; 
 
} 
 

 
.img1 { 
 
    border: 1px solid #f00; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.img2 { 
 
    border: 1px solid #0f0; 
 
    position: absolute; 
 
    z-index: 2; 
 
    top: 0px; 
 
    left: 0px; 
 
}

<div class="main"> 
 
    <img class="img1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" /> 
 
    <img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" /> 
 
</div>