Menu
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.
561
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:
- the background and borders of the element forming the stacking context.
- the child stacking contexts with negative stack levels (most negative first).
- the in-flow, non-inline-level, non-positioned descendants.
- the non-positioned floats.
- the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
- the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- 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?
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
