Positioning a child without closing parent content

Question

There is a block in which you need to make an "arrow" upward so that it is clear what kind of block it is. The problem is that it overlaps the content of the parent, i.e. it goes higher in z-index than the parent. By setting the z-index , nothing happens. How to fix this?

 .block { width: 150px; height: 150px; background: red; margin: 50px auto; position: relative; z-index: 2; } .block:before { width: 20px; height: 20px; content: ''; background: #fff; display: block; position: absolute; left: 60px; transform: rotate(45deg); top: -10px; z-index: 1; background: #aaa; }

 <div class="block"> Some text here, guys </div>

Codepen: https://codepen.io/Alexxosipov/pen/qPYxpQ

Answer 1 · 2017-10-10T12:00:04

The point is that you set the z-index parent object. And he is really "higher." But the text inside is not taller than your "arrow".

The solution is to wrap the text in a block, and put the correct z-index this block.

Codepen example

 .block { width: 150px; height: 150px; background: red; margin: 50px auto; position: relative; } .block:before { width: 20px; height: 20px; content: ''; display: block; position: absolute; left: 60px; transform: rotate(45deg); top: -10px; z-index: 0; background: #aaa; } .block .text-block { z-index: 2; position: relative; background: red; // хак }

 <div class="block"> <div class="text-block">Some text here, guys</div> </div>

But one problem is that it no longer covers the content, but the background remains above the parent's background.

Qwertiy ♦ Qwertiy 76.3k 17 74 201 · Answer 2 · 2017-10-10T13:11:53

In order for the block to be under the text, z-index should be set negative (with the same background color, there will be no problem with a diamond instead of a triangle):

 .block { width: 150px; height: 150px; background: red; margin: 50px auto; position: relative; z-index: 2; } .block:before { width: 20px; height: 20px; content: ''; background: #fff; display: block; position: absolute; left: 60px; transform: rotate(45deg); top: -10px; z-index: -1; background: #aaa; }

 <div class="block"> Some text here, guys </div>

It is worth reading about the context of z-index and how it works.

Positioning a child without closing parent content

2 answers 2

More articles: