Negative Margin and Background

negative margin and background

You can simply add position:relative; to .text

DEMO

* {    margin: 0;    padding: 0;}.image {    overflow: hidden;}.image img {    display: block;}.text {    position:relative;    background: green;    padding: 20px;    margin-top: -60px;    color: #FFFFFF;    overflow: hidden;}

<div class="wrap">    <div class="image">        <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />    </div>    <div class="text">text with background</div></div>

Div With Negative Margin and Background Color Not Showing In Flexbox From Outside

you need to add position:relative; to .negative

here it is:

.parent {
  background-color: cyan;
}

.left-child {
  height: 16em;
  background-color: aquamarine;
}

.right-child {
  height: 16em;
  background-color: orange;
}

.negative {
  margin-top: -4em;
  margin-left: 3em;
  position:relative; // this line
  background-color: white;
}

.flex-row {
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;  
}

.mf6 {flex: 0 0 50%;}

How can I set negative margin for background URL image in using CSS?

You can use multiple background-images and then use their position to make them overlap. https://developer.mozilla.org/en-US/docs/Web/CSS/background

.bg {
  background: url('https://picsum.photos/600'), url('https://picsum.photos/600');
  background-size: 600px;
  background-position: -100px bottom, left top;
  background-repeat: no-repeat, no-repeat;
  width: 100vw;
  height: 100vh;
}

<div class="bg"></div>

Negative margin remove background property of static siblings

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?

Using negative % margin not covering parent element

The exact value should be -6.81% and not -6%.The inner container will consider the content area of the outer container (without the padding)¹ to calculate the percentage. So we will have

0.06xW = px(1 - 0.06x2)xW  ==> p = 0.068181..

Where W is the content width of #test, (1 - 0.06x2)xW is the content width of .content and p is the percentage you need to use inside the negative margin:

#test {  max-width: 800px;  width: 100%;  margin: 0 auto;  font-size: 12px;  background: #fff;  color: #000;  line-height: 18px;  border: 1px solid #000;}
#test .content {  padding: 2% 6%;  text-align: justify;}
#test .apply {  margin-left: -6.81%;  margin-right: -6.81%;}
#test .apply p {  font-family: Arial, Helvetica, sans-serif;  text-align: center;  background-color: yellow;}

<div id="test">  <div class="content">    <p><strong>Test</strong></p>    <div class="apply">      <p>test</p>    </div>  </div></div>

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box model and margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.

For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.

If I were to make a graphical representation, I'd probably go with something like this (not to scale):

The margin box lost 8px on the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that's not always the case.

Bonus:

Still need convincing that reading specs is the way to go (as opposed to articles like this)? I see you're trying to vertically center the element, so why do you have to set margin-top:-8px; and not margin-top:-50%;?

Well, vertical centering in CSS is harder than it should be. When setting even top or bottom margins in %, the value is calculated as a percentage always relative to the width of the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos

---

Related Topics