Css 如何将容器放在另一个div的顶部_Css_Html_Mask

Css 如何将容器放在另一个div的顶部

css html

Css 如何将容器放在另一个div的顶部,css,html,mask,Css,Html,Mask,我不明白为什么我的容器显示在屏幕底部。我知道有两个可能的问题。最好的方法是：如何将掩码应用于背景图像，这样我就可以将图像url粘贴到背景上，然后我就可以在上面玩代码了。另一个问题是：如何在没有绝对定位的情况下使conatiner div显示在背景div的顶部。抱歉，这让人困惑。这是我的密码 <html> <head> <title> Singapore - gallery </title> <link rel="shortcut icon"

我不明白为什么我的容器显示在屏幕底部。我知道有两个可能的问题。最好的方法是：如何将掩码应用于背景图像，这样我就可以将图像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>


新加坡-画廊
*  {
保证金：0；
填充：0；
}
#背景img{
宽度：100%；
-webkit掩码图像：
-webkit渐变（线性、左上、左下、，
从（rgba（0,0,0,1）），到（rgba（0,0,0,0））；
z指数：-1；
}
#容器{
宽度：1000px；
背景色：#fff；
保证金：0自动；
边框：3px实心#eee；
}
新加坡画廊

逻辑如下

使父div

位置：相对

并将叠加div设置为

位置：绝对并使用top:0
因此，这里您使用的是img
标记，当然没有定位，所以您所做的是
我假设您想在您的img
上覆盖h1
，所以对#背景使用位置：相对，而不是使用位置：绝对用于img
并使其top:0和z指数：1/*可选*/
，稍后将#容器
设置为位置：绝对并使用top:0和z-索引：999/*强制性的*/
逻辑如下
使父div位置：相对
并将叠加div设置为位置：绝对并使用top:0
因此，这里您使用的是img
标记，当然没有定位，所以您所做的是
我假设您想在您的img
上覆盖h1
，所以对#背景使用位置：相对，而不是使用位置：绝对用于img
并使其top:0和z指数：1/*可选*/
，稍后将#容器
设置为位置：绝对并使用top:0和z-索引：999/*必修课程*/
谢谢！我确实使用了你的建议，在背景img中排名绝对前0，但我把z指数设为-1，这样我就不需要对conatiner做任何事情了div@user1815176取决于你想采取什么样的方法，你能理解我对你的解释是件好事：）谢谢！我确实使用了你的建议，在背景img中排名绝对前0，但我把z指数设为-1，这样我就不需要对conatiner做任何事情了div@user1815176取决于你想采取什么方法，你能理解我向你解释的内容是件好事：）