Why the Content Is Not Covered by the Background of an Overlapping Element

body {  margin:0;  padding:0;  font-family: Arial, Helvetica;  background-color: blue;}header {  background-color: red;  color: white;  margin: 0;  padding: 10px 10px 50px 10px;}
.tiles {  /* this is the important part. Make sure top margin = top padding + height of text */  margin: -25px 10px 0 10px;  display:flex;  justify-content: space-between;}
.tile {  flex-basis: 25%;  background-color: white;  border-radius: 5px;  padding: 10px;  min-height: 100px;}

<header>  <h2>Some Header Content</h2></header><section><div class="tiles">  <div class="tile">Tile Content</div>  <div class="tile">Tile Content</div>  <div class="tile">Tile Content</div></div></section>

Why is the body element overlapping its child element?

If you want main div to show, without being cropped, you need to change the overflow on main to overflow: visible. Might need more clarification on what you're trying to achieve. :)

Why does text on the same layer overlap - even when it has an opaque background?

Why does text on the same layer overlap - even when it has an opaque background?

The spec says (emphases 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).

The backgrounds and the text are considered separately in the painting order: the backgrounds are represented by #3, and the text is represented by #5. The second element appears later in the source, so it is painted over the first, but the text still needs to be painted over the backgrounds, because the two elements are participating in the same stacking context.

Must I create a new stacking context to prevent the text overlapping here?

Yes, the best way to deal with this is by positioning the elements or by having them establish their own stacking contexts. A stacking context is always self-contained, so having each element establish its own stacking context will always ensure that the backgrounds and text of the two elements don't overlap one another.

How do I prevent the CSS :after pseudo-element from overlapping other content?

As noted above:

It has nothing to do with being a pseudo element. You've toyed with its positioning, any other element would do the same thing with the styles you've provided. Unless your images are purely decorative (the fact that they have a caption/description clearly implies they are not decorative), you should be using the image element instead of a background property.

DIV Overlapping But Not Hiding The Portion Of the DIV That It Overlaps

You need to give the front most div a background color.

    div.front {
        height:60px;
        width:100px;
        border:3px solid blue;
        position:absolute;
        z-index:1;
        background-color: white;
    }
    div.back {
        background-color:#e0e0e0; 
        border:1px solid red;
        position:absolute;
        z-index:-1;
    }

---

Related Topics