Why is the text visible, but the background is not?

Question

I have following mark up:

<div class="one">Content</div>
<div class="two"></div>

and following style sheets:

.one, .two {
    height: 20px;
}
.one {
    background-color: #f00;
}
.two {
    background-color: #0f0;
    margin-top: -10px;
}

Why is the text Content visible, but the red background is not? I would expect the text also to be only partly visible due to the given style sheets.

For your convenience, I also created a jsFiddle.

The red background is also visible to me (using latest Chrome). — ConcurrentHashMap, Jan 29 '13 at 13:45
in Chrome and IE8 red background **is **visible, but only 10px of it, because of your negative margin on div two. — Ruslan, Jan 29 '13 at 13:46
I am sorry for any misunderstandings. the red div is also visible to me, but only 10 pixel. yet the text is fully visible even though it is inside the red div — Amberlamps, Jan 29 '13 at 13:54
I think we solved it here http://stackoverflow.com/questions/15052402/strange-css-behavior-with-layers/15053892#answer-15053892 — Dylan Valade, Feb 24 '13 at 17:48

score 1 · Accepted Answer · answered Jan 29 '13 at 13:48

1

If you want that text of first div would be only partly visible, you need to use position and z-index.

.one, .two {
    height: 20px;
}
.one {
    background-color: #f00;
    position: relative;
    z-index: 1;
}
.two {
    background-color: #0f0;
    margin-top: -10px;
    position: relative;
    z-index: 2;
}

http://jsfiddle.net/v5LfZ/2/

answered Jan 29 '13 at 13:48

MadCom

241
2
8

This solves the problem but it does not explain why my versions.behaves like it behaves?!? – Amberlamps Jan 29 '13 at 13:55
Because background is background and he deserves to be in background, but if you want that your background would not be in background - use z-index :) – MadCom Jan 30 '13 at 14:36

Why is the text visible, but the background is not?

1 Answers1