Rabner Casandara Rabner Casandara - 1 month ago 6
CSS Question

how to set div to show at the bottom of the page

I create a menubar and make it transparent and I add an image in my container div to look image behind menubar after this when I create another div it overlapping each other I want second div visible below container div

* {
margin: 0;
padding: 0;
}
.top_nav {
height: 80px;
width: 100%;
background: rgba(0, 0, 0, .5);
position: relative;
}
.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;
}
.details {
height: 638px;
width: 100%;
position: absolute;
}

<header>
<div class="top_nav"></div>
</header>
<div class="container">
<img src="http://www.100resilientcities.org/page/-/100rc/img/blog/rsz_resilientcity_headphoto.jpg">
<div id="short-des"></div>
</div>
<div class="details"></div>


enter image description here

Answer

It's about CSS position property.

Solution

 {
  margin: 0;
  padding: 0;
}
.top_nav {
  height: 80px;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  position: absolute;
}
.container {
  height: 638px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-position: center;
  top: 0;
  z-index: -1;
}
.container img {
  width: 100%;
  height: 638px;
}
.details {
  height: 638px;
  width: 100%;
}

https://jsfiddle.net/ta1zveue/