CODEWITHSUNDEEP
htmlcsscss-float
user2742409
user2742409

Reputation: 315

Position div behind overlapping div

I've got the following setup http://jsfiddle.net/47x60k4w/529/.

HTML

<div class="header">
header
</div>
<div class="inner_block">
    <div class="column">
        <img src="xxx" />
    </div>
    <div class="column">
        <img src="xxx" />
    </div>
    <div class="column">
        <img src="xxx" />
    </div>
</div>
<div class="footer">
footer
</div>

The inner_block should overlap the header class and the footer should be placed right behind the inner_block.

In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.

The result should look like this beautiful mockup. enter image description here

Do you have any ideas?

Thanks in advance.

Upvotes: 2

Views: 2034

Answers (5)

devDeejay
devDeejay

Reputation: 6019

Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.

Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.

Example of z-index

1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

2) https://css-tricks.com/almanac/properties/z/z-index/

Hope it helps.

Upvotes: 0

Razia sultana
Razia sultana

Reputation: 2211

  .header {
        height: 200px;
        width:800px; 
        background-color:#000;
        margin:20px;
    }
   .header {
        margin-bottom: -25px;
    }
    .inner_block {
        width: 35%; 
        height: 150px;
        margin: auto 200px;
        background-color:#FFF;
        border:1px solid #000;
        margin-top: -45px; 

    }
    .column{
        max-width:20%;
        float:left;
        border: 2px soid #999;
        margin:25px;  
    }
    .column img{
         max-width:100%;
        height:auto;
        }

    .footer {
        height: 100px; 
        margin-top: -25px;
        margin:20px;
        background-color:#F00;
        width:800px;

    }
    .content {
        position: relative;
        z-index: 1;
    }

 <div class="header"></div>
   <div class="inner_block">
     <div class="column">
       <img src="download.jpg"/>
        </div>
      <div class="column">
        <img src="download.jpg"/>
       </div>
    <div class="column">
        <img src="download.jpg"/>
      </div>
   </div> 
<div class="footer">
</div>

Upvotes: 0

frnt
frnt

Reputation: 8795

You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.

.header{
  position:relative;
  background-color:black;
  width:100%;
  height:50px;
}

.footer{
  background-color:red;
  width:100%;
  height:50px;
  margin-top:calc(100% - 82%);
}

.inner_block{
  position: absolute;
  width:90%;
  border:solid 1px black;
  padding: 5px;
  background-color:white;
  margin:-2.5% calc(100% - 97%);
}

.column {
    width:30%;
    float:left;
    margin:0 1.6%;
}

.column img {
    max-width:100%;
    height:auto;
}
  <div class="header">
  
  </div>
  <div class="inner_block">
		<div class="column">
				<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
		</div>
		<div class="column">
			<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
		</div>
		<div class="column">
			<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
		</div>
		</div>
    <div class="footer">
    test
    </div>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

So I made the following changes to your code:

  1. Remove the position: absolute for the inner-block.

  2. As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.

    .inner_block:after {
  content: '';
  display: block;
  clear: both;
}

    Whenever using floats, remember to clear it.

  3. Added position: relative to the inner_block to position it over the header and footer.

  4. Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).

  5. Also tinkered a bit with the margins and widths to achieve the layout.

.header {
  position: relative;
  background-color: black;
  width: 100%;
  height: 50px;
}
.footer {
  clear: both;
  background-color: red;
  width: 100%;
  height: 50px;
}
.inner_block {
  position: relative;
  /*width: 100%;*/
  border: solid 1px black;
  padding: 5px;
  margin-left: 2.5%;
  margin-top: -2.5%;
  margin-right: 2.5%;
  margin-bottom: 2.5%;
  background-color: white;
}
.inner_block:after {
  content: '';
  display: block;
  clear: both;
}
.column {
  max-width: 30%;
  float: left;
  margin-right: 2.5%;
}
.column:first-child{
    margin-left: 2.5%;
 }
.column:last-child{
    margin-left: 0;
 }
.column img {
  max-width: 100%;
  height: auto;
  display: block;
}
<div class="header">

</div>
<div class="inner_block">
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
  </div>
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
  </div>
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
  </div>
</div>
<div class="footer">
  test
</div>

Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!

Alternate Solution:

So here is a solution using a flexbox which is easier to set up:

First remove the floating container and the clearfix.

Now Wrap the inner_block with another div

.inner_block_wrapper {
  margin: -2.5% 2.5% 2.5% 2.5%;
  background-color: white;
  position: relative;
}
.inner_block {
  border: solid 1px black;
  background-color: white;
  padding: 5px;
  display: flex;
  justify-content: center;
}
.column {
  margin: 5px;
}

Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!

.header {
  position: relative;
  background-color: black;
  width: 100%;
  height: 50px;
}
.footer {
  clear: both;
  background-color: red;
  width: 100%;
  height: 50px;
}
.inner_block_wrapper {
  margin: -2.5% 2.5% 2.5% 2.5%;
  background-color: white;
  position: relative;
}
.inner_block {
  border: solid 1px black;
  background-color: white;
  padding: 5px;
  display: flex;
  justify-content: center;
}
.column {
  margin: 5px;
}
.column img {
  max-width: 100%;
  height: auto;
  display: block;
}
<div class="header">

</div>
<div class="inner_block_wrapper">
  <div class=" inner_block ">
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
    </div>
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
    </div>
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
    </div>
  </div>
</div>
<div class="footer ">
  test
</div>

Upvotes: 1

Elvis
Elvis

Reputation: 1143

is this what you were looking for ?

.header{
  position:relative;
  background-color:black;
  width:100%;
  height:50px;
}

.footer{
  clear:both;
  background-color:red;
  width:100%;
  height:50px;
}

.inner_block{
  position: absolute;
  width:100%;
  border:solid 1px black;
  padding: 5px;
  margin-left: 2.5%;
  margin-top:-2.5%;
  background-color:white;
}

http://jsfiddle.net/8y4e8L08/

Upvotes: 0

Related Questions