How to put a div over an image without covering everything else?

Question

Hi I am trying to make a home page for my school project and I am trying to put a text box over my image. I have been playing around with position:absolute/relative but the image just covers my navigation bar every time I make it absolute, and the div won't go on top. I don't know if I explained it well but this is what I have:

.navbar {
  list-style-type: none;
  margin: 0;
  float: right;
  width: 100%;
  position: relative;
  clear: none;
}

.navbarlist {
  float: right;
  padding: 2%;
  clear: none;
  padding: 40px;
}

.image1 {
  width: 100%;
}

.cover {
  width: 100%;
  height: 500px;
  position: relative;
  background-color: royalblue;

}

.covercontainer {
  position: relative;
}

<div class="navbarcontainer">
  <ul class="navbar">
    <li class="navbarlist"><a class="navbarlink" href="#">Contact Us</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Attractions</a></li>
    <li class="navbarlist"><a class="navbarlink, active" href="#">Home</a></li>
    <li class="navbarlogo"><img class="navbarimg" src="image.png"></li>
  </ul>
</div>
<div class="covercontainer">
  <img class="image1" src="#">
  <div class=cover></div>
</div>

You are sharing a code with your local images. This code does not reproduce your problem. Please use placeholder images so the code you share reproduces your current situation. I edited your question with a code snippet ( please use that in the future so it's easy for us to debug your code ) — Mihai T, Feb 25 '20 at 09:18

score 0 · Accepted Answer · answered Feb 25 '20 at 09:27

Are you looking for a solution like this?

The best way for this approach is to use a background image rather than using an image. If you are still required to use an image the do the following step to place the cover div over the image.

Add position: relative; for the container div
Add position: absolute; top: 0; for the child divs.

.navbar {
    list-style-type: none;
    margin: 0;
    float: right;
    width: 100%;
    position: relative;
    clear: none;
}

.navbarlist {
    float: right;
    padding: 2%;
    clear: none;
    padding: 40px;
}

.image1 {
    width: 100%;
    position: absolute;
    top: 0;
}

.cover {
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
    background-color: #4169e199;
}

.covercontainer {
    position: relative;
}

.navbarcontainer {
    width: 100%;
    display: inline-block;
}

<div class="navbarcontainer">
    <ul class="navbar">
    <li class="navbarlist">
        <a class="navbarlink" href="#">Contact Us</a>
    </li>
    <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
    <li class="navbarlist">
        <a class="navbarlink" href="#">Attractions</a>
    </li>
    <li class="navbarlist">
        <a class="navbarlink, active" href="#">Home</a>
    </li>
    <li class="navbarlogo"><img class="navbarimg" src="image.png"</li>
    </ul>
</div>
<div class="covercontainer">
    <img class="image1" src="https://www.w3schools.com/html/pic_trulli.jpg" />
    <div class="cover"></div>
</div>

Yes it worked exactly how i wanted thank you :) – milkway20 Feb 25 '20 at 10:42 — milkway20, Feb 25 '20 at 10:42

score 0 · Answer 2 · answered Feb 25 '20 at 09:35

If you want your image to be behind then simply use background-image property in css. If you still want to use img tag for your image then make sure your parent element has position: relative and both child elements i.e., img and div elements have position:absolute and control their stacking order using z-index property like img { position: absolute; z-index: 1 } and .child-elem { position: absolute; z-index: 2 }.

score 0 · Answer 3 · answered Feb 25 '20 at 09:40

.navbar {
  list-style-type: none;
  margin: 0;
  float: right;
  width: 100%;
  position: relative;
  clear: none;
}

.navbarlist {
  float: right;
  padding: 2%;
  clear: none;
  padding: 40px;
}

.image1 {
  width: 100%;
}

.covercontainer {
  position: relative;
}

.cover {
  width: 100px;
  height: 50px;
  background-color: royalblue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>

  <body>
    <div class="navbarcontainer">
      <ul class="navbar">
        <li class="navbarlist"><a class="navbarlink" href="#">Contact Us</a></li>
        <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
        <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
        <li class="navbarlist"><a class="navbarlink" href="#">Attractions</a></li>
        <li class="navbarlist"><a class="navbarlink, active" href="#">Home</a></li>
        <li class="navbarlogo"><img class="navbarimg" width="80px" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></li>
      </ul>
    </div>
    <div class="covercontainer">
      <img class="image1" src="https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg">
      <div class="cover"/>
    </div>
  </body>

</html>

score 0 · Answer 4 · answered Feb 25 '20 at 09:41

I guess your problem was because of "float" in navigation bar that does not have a height. @Nitheesh answer the problem.

.navbarcontainer {
    width: 100%;
    display: inline-block;
}

You may start to learn with the inspector tool (using Chrome or Firefox) to see your elements. It's a bit of a learning curve to get it right.

Below is a sample using Chrome inspector, Right-click and select Inspect. If you have copied @Nitheesh codes you can uncheck/check the styles. This way you can see that due to the usage of "float:right", the navigation bar in actual fact does not have a height. Hope this helps to explain further.

score 0 · Answer 5 · answered Feb 25 '20 at 10:03

First, Just add clear:both in class covercontainer
Like this

.covercontainer {
  clear: both;
  position: relative;
}

Also I set opacity 0.5 and height/width 50% for cover so that image and cover both can appear.

Second, If you just remove float of navbar class then will work fine too.

.navbar {
  list-style-type: none;
  margin: 0;
  float: right;
  width: 100%;
  position: relative;
  clear: none;
}

.navbarlist {
  float: right;
  padding: 2%;
  clear: none;
}

.image1 {
  width: 100%;
}

.cover {
  width: 50%;
  height: 50%;
  position: absolute;
  background-color: royalblue;
  top: 0;
  left: 0;
  opacity: 0.5;
}

.covercontainer {
  clear: both;
  position: relative;
}

<div class="navbarcontainer">
  <ul class="navbar">
    <li class="navbarlist"><a class="navbarlink" href="#">Contact Us</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Attractions</a></li>
    <li class="navbarlist"><a class="navbarlink, active" href="#">Home</a></li>
    <li class="navbarlogo"><img class="navbarimg" src="https://www.gravatar.com/avatar/4966b63e30afddb188b43a1d9a874519?s=48&d=identicon&r=PG&f=1"></li>
  </ul>
</div>
<div class="covercontainer">
  <img class="image1" src="https://ipsumimage.appspot.com/600x250?l=Ipsum%20Image&f=ffffff">
  <div class=cover>Div Text</div>
</div>

How to put a div over an image without covering everything else?

5 Answers5