如何將容器放在另一個div的頂部

Question

我不知道為什么我的容器顯示在屏幕底部。 我知道有兩個可能的問題。 最好的辦法是：如何在背景圖像上應用遮罩，這樣我就可以將圖像url粘貼到背景上，然后再在上面加上代碼。 另一個問題是：如何在不絕對定位的情況下使conatiner div顯示在背景div的頂部。 抱歉，這令人困惑。 這是我的代碼

<html>
<head>
<title> 
Singapore - gallery
</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial scale=1.0">
<style>
*  {
  margin: 0;
  padding: 0;
}
#background img {
  width: 100%;
  -webkit-mask-image: 
  -webkit-gradient(linear, left top, left bottom, 
  from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); 
  z-index: -1; 
}

#container {
  width: 1000px;
  background-color: #fff;
  margin: 0 auto;
  border: 3px solid #eee; 
}

</style>
</head>
<body>
<div id="background"> <img src="gallery.jpg" />
<div id="container">
<h1> Singapore Gallery </h1>  
</div>
</div>
</body>

Answer 1

邏輯是這樣的

設置父div position: relative; 並將overlay div設置為position: absolute; 並使用top: 0;

因此，這里您肯定是在使用img標簽而沒有定位，所以您要做的是

我假設您想在您的img上疊加h1 ，所以對#background使用position: relative ，而不要使用position: absolute; 為img並使其top: 0; 和z-index: 1; /*Optional*/ z-index: 1; /*Optional*/ ，然后將#container為position: absolute; 並使用top: 0; 和z-index: 999; /*Compulsory*/ z-index: 999; /*Compulsory*/

如何將容器放在另一個div的頂部

問題描述

1 個解決方案

解決方案1
4 已采納 2012-11-18 20:00:35

如何將容器放在另一個div的頂部

問題描述

1 個解決方案

解決方案1 4 已采納 2012-11-18 20:00:35

解決方案1
4 已采納 2012-11-18 20:00:35