Rabner Casandara Rabner Casandara - 1 month ago 8
CSS Question

How To Visible Div Over Image

html

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<img src="cover.jpg">
<div id="short-des">

</div>
</div>
</body>
</html>


css

*{
margin: 0;
padding: 0;
}

.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}

.container img{
width: 100%;
height: 638px;
}

.container #short-des{
background: rgba(0,0,0,.5);
height: 400px;
width: 500px;
position: relative;
}


i want short-des div to visible over image at the center i tried z-index but it not working. please help me out to fix this with reason so i will take these things in future

Answer

Put your div positioned absolute to overlap your image. Use left/top/right/bottom properties to set it's position.

It's position will be relative to closest non-static (absolute/relative/fixed) positioned element or <body>

#short-des,
#short-des2 {
  position: absolute;
  left: 90px;
  top: 50px;
  width: 50px;
  height: 50px;
  background-color: rgba(100, 250, 100, .6);
  z-index: 7;
}

#short-des2 {
  z-index: 8;
  left: 100px;
  top: 55px;
  background-color: rgba(250, 100, 100, .7);
}
.wrapper {
  margin: 50px;
  position: relative;
}
<div class="wrapper">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
  <div id="short-des"></div>
  <div id="short-des2"></div>
  </div>

Comments