how to put a container on top of another div
Question
I can't figure out why my container is displayed on the bottom of the screen. I know there are two possible questions for this. The best would be: how to make a mask apply to the background image, so I could just stick the image url to the background, and then I could play around with the code on top of that. The other question is: How to make the conatiner div display on top of the background div without absolute positioning. Sorry if that is confusing. Here is my code
<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>
1 answers
solution1
4 ACCPTED 2012-11-18 20:00:35
The logic goes like this
Make the parent div position: relative; and make the overlay div as position: absolute; and use top: 0;
So here you are using img tag certainly with no positioning so what you do is
I assume you want to overlay h1 on your img so use position: relative for #background , than use position: absolute; for img and make it top: 0; and z-index: 1; /*Optional*/ z-index: 1; /*Optional*/ , and later make #container as position: absolute; and use top: 0; and z-index: 999; /*Compulsory*/ z-index: 999; /*Compulsory*/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.