5

I am using negative margin on bottom to pull the adjacent element to overlap current element. It is my intention to make it overlap. But I want the whole div to be overlapped above the image. But, it turned out that it removes the background of the pulled element as well. Can someone explained this? 

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <style>
    .div1 {
      background-color: black;
    }

    img {
      margin-bottom:-20px;
    }
  
  </style>
  
  <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <img src="http://placehold.it/200x300" alt="">
        <div class="div1">
          Here is example text
        </div> 
      </div>
    </div>
  </div>

</body>
</html>

http://jsbin.com/mejoci/edit?html,css,output

EDITED: It is kinda working when the element is positioned(fixed|relative|absolute) but not with static position which is the default position even when position is not set.

TylerH
  • 20,799
  • 66
  • 75
  • 101
geckob
  • 7,680
  • 5
  • 30
  • 39
  • add img { max-width: 100%;} – Lalji Tadhani Jan 12 '16 at 09:58
  • http://jsbin.com/sewovojoko/1/edit?html,css,output – Lalji Tadhani Jan 12 '16 at 10:00
  • @LaljiTadhani: I am not just looking for solution on how to implement this kind of style, but I want to know the reason of this problem happening. But yeah, your approach looks like working. What makes the div1 overlap though? – geckob Jan 12 '16 at 10:03
  • img size is big to parent element – Lalji Tadhani Jan 12 '16 at 10:04
  • negative margin overlap the sibling element. Just use `position:relative` to sibling element will make `.div1` over to image. – ketan Jan 12 '16 at 10:11
  • @ketan: Overlapping sibling element supposedly will not remove the background right? – geckob Jan 12 '16 at 10:24
  • There are already same issue people get but don't know why only background-color ovelap not text. http://stackoverflow.com/questions/23285146/background-hidden-when-overlaying-header-with-negative-top-margins and http://htmlasks.com/overlay_a_img_tag_with_a_div_using_negative_margin_top_on_the_sibling_div – ketan Jan 12 '16 at 10:34
  • related to [this](http://stackoverflow.com/q/25055301/703717) question – Danield Jan 13 '16 at 22:09

2 Answers2

3

In your sample code, both elements share the same stacking context.

That being the case, the rules which define how elements are layered are defined in the spec as follows: (bold is mine)

Within each stacking context, the following layers are painted in back-to-front order:

  1. the background and borders of the element forming the stacking context.
  2. the child stacking contexts with negative stack levels (most negative first).
  3. the in-flow, non-inline-level, non-positioned descendants.
  4. the non-positioned floats.
  5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  7. the child stacking contexts with positive stack levels (least positive first).

So you can see that - within the same stacking context - inline-level elements (#5) are painted above non-inline-level elements (#3)

So in your case - since both the <img> and the <div> share the same stacking context and the <img> element is an inline-level element - it is painted above the <div> - even though the <div> occurs later in the document tree order.

Check out this codepen demo which illustrates this point further

Extra reading:

Elaborate description of Stacking Contexts

Stacking without z-index (MDN)

Z-Index And The CSS Stack: Which Element Displays First?

Community
  • 1
  • 1
Danield
  • 121,619
  • 37
  • 226
  • 255
  • When I make the div as positioned for instance relative, it will fall under #6 then? – geckob Jan 14 '16 at 01:54
  • How about setting the image to be max-width: 100%? It seems like solving the issue but I am not sure it falls under what category – geckob Jan 15 '16 at 06:19
-1

Position: relative will solve your issue of overlapping 

<style>
    .div1 {
      background-color: black;
      position: relative;
    }

    img {
      margin-bottom:-20px;
    }

  </style>
Ashvin Jadav
  • 134
  • 4
  • Can you explain why? – RoToRa Jan 12 '16 at 12:40
  • Because your img : margin-bottom will overlap with -20px that you have defined that property , so to remove that overlap issue you should define position:relative on overlapped controll(that is div) so relative means positioned relative to its normal position will show div clear and it will be exactly as it would be. – Ashvin Jadav Jan 12 '16 at 12:50