Element with negative margin covered by previous one

Question

I am trying to make element position with negative margin - one element should cover a bit the previous one. But it's bit complicated - negative margin should have only child div of #content. See example below. I need to have red element, than yellow element and gray element inside the red one should have negative margin and cover bottom of red one.

I have already tried relative and absolute position, change z-index, but none of these worked for me.

#sectionTitle {
height: 150px;
text-align: center;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
background: red;
}
#content {
background: yellow;
position: relative;
width: 100%;
height: auto;
min-height: 300px;
overflow: auto;
z-index: 20;
}
#content .block {
position: relative;
background: #eee;
width: 90%;
top: -50px;
margin: 0 auto 0 auto;
box-sizing: border-box;
height: auto;
min-height: 400px;
z-index: 30;
}

<div id="sectionTitle">
       ...some text...
</div>

<div id="content">
    <div class="block">
        ...element which should cover bottom of #sectionTitle element
    </div>
</div>

Now when I inspect the element, .block goes 50px to #sectionTitle, but it's not visible, because sectionTitle element covers it.

I've updated the question - I need to have red one, than yellow one and gray one which is inside the yellow, should cover bottom of the red one — hyst, Jun 02 '19 at 14:58

Temani Afif · Accepted Answer · 2019-06-02T15:25:46.490

Simply remove z-index (to avoid the creation of a stacking context¹) and overlow:auto (to avoid the creation of a block formatting context²) from the #content div:

#sectionTitle {
  height: 150px;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
  background: red;
}

#content {
  background: yellow;
  width: 100%;
  height: auto;
  min-height: 300px;
}

#content .block {
  position: relative;
  background: #eee;
  width: 90%;
  top: -50px;
  margin: 0 auto 0 auto;
  box-sizing: border-box;
  height: auto;
  min-height: 400px;
  z-index: 30;
}

<div id="sectionTitle">
  ...some text...
</div>

<div id="content">
  <div class="block">
    ...element which should cover bottom of #sectionTitle element
  </div>
</div>

¹Why can't an element with a z-index value cover its child?

²What formatting context applies to elements that don't create their own?

Element with negative margin covered by previous one

1 Answers1