Rabner Casandara Rabner Casandara - 11 months ago 56
CSS Question

How To Visible Div Over Image


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



margin: 0;
padding: 0;

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 Source

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-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>