html – How to put a div over an image without covering everything else?-ThrowExceptions

Exception or error:

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>
How to solve:

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.

  1. Add position: relative; for the container div
  2. 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>

###

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

###

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

###

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.

enter image description here

###

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>

Leave a Reply

Your email address will not be published. Required fields are marked *