我在重新調整瀏覽器大小時重疊了2個div

因此，您可以看到，我已將圖像設置爲響應，因此在重新調整瀏覽器大小時會相應地延長，以便圖像適合並保持其比例。這就是我想要的。我不想要的是音樂播放器與圖像重疊。我在重新調整瀏覽器大小時重疊了2個div

我還想保持他們的位置，他們的方式，居中和彼此相鄰。

我試圖尋找解決方案，但我發現的一切都是在不同的條件下，並沒有幫助。我確信這是一個愚蠢的簡單修復，我只是無法將頭圍繞在它周圍。

感謝您的高級幫助！

HTML

<body> 

<img id="background-img" class="bg" border="0" src="http://fc06.deviantart.net/fs70/f/2012/191/f/6/me_by_danidrama-d56ryzq.png" alt="" ondragstart="return false" onContextMenu="return false"/> 

<div class="player"><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=https://www.dropbox.com/s/q8fkqwom6m2t5n1/extan.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" align="middle" type="application/x-shockwave-flash" /></div> 

</body>

CSS

body { 
    background-color:#B1ACA9; 
} 
.bg { 
    height:91%; 
    position: absolute; 
    bottom: 0; 
    right: 25%; 
    z-index: -1; 
} 
.player { 
    position:absolute; 
    top:50%; 
    left:40%; 
    z-index:99999; 
}

來源

2014-06-15 SakreD

試試這個：http://jsfiddle.net/lotusgodkk/6ML3s/2/

HTML：

<div class="container"> 
    <div> 
     <img id="background-img" class="bg" border="0" src="http://fc06.deviantart.net/fs70/f/2012/191/f/6/me_by_danidrama-d56ryzq.png" alt="" ondragstart="return false" onContextMenu="return false" /> 
    </div> 
    <div class="player"> 
     <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/q8fkqwom6m2t5n1/extan.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" align="middle" type="application/x-shockwave-flash" /> 
    </div> 
</div>

CSS：

.container { 
    width:100%; 
    height:300px; 
    display:table; 
} 
.container div { 
    display:table-cell; 
    width:49%; 
    vertical-align:middle; 
} 
.container div img { 
    max-width:100%; 
}

裹着一個div代碼，並在div中的圖像。我用width:49%，但你可以根據你的使用和要求進行調整。

來源

2014-06-15 14:05:42

謝謝！有沒有辦法讓音樂播放器成爲圖像的孩子？這樣圖像就可以保持絕對，並且音樂播放器不會重疊。因爲我正在使用不同的圖像，但我不得不用它來替換它，導致它的NSFW圖紙。我想保持圖像粘在屏幕的底部，以「底部：0;」所以它需要是絕對的=/ – SakreD

你不能讓任何元素成爲圖像的子元素。圖像是沒有內容的自閉標籤。但是你可以嘗試讓玩家成爲兄弟姐妹。 –

您可以嘗試使用圖像作爲div的背景，然後將音樂播放器放入div中。這將爲你工作 –

我在重新調整瀏覽器大小時重疊了2個div

回答

相關問題