Layer Overlay Priority

Question

There is a block that is located under the heading; the heading is adjusted on top of it, but it is necessary that the paragraph inside the block be adjusted over the heading. Is this realistic to implement?

* { box-sizing: border-box; margin:0; padding:0; } div { width: 400px; height: 400px; background: gray; position: absolute; top: 0; z-index: 1; } h1 { position: absolute; z-index: 2; border: 1px black solid; width: 500px; left: 0; } p { text-align: right; position: relative; z-index: 3; }

  <body> <h1>Этот мешает</h1> <div> <p>Я хочу скопировать этот текст</p> </div> </body>

Crantisz Crantisz 8.579 2 eight 38 · Answer 1 · 2016-12-11T08:28:02

In your example, the div compared by z-index with h1 , and all internal elements in the div get in this comparison z-index: 1 . And z-index: 3 already go to compare the elements inside the div . I would remove the div position: absolute; then the div will be considered a regular element and the child elements will already be compared to h1 :

 * { box-sizing: border-box; margin:0; padding:0; } div{ width: 400px; height: 400px; background: gray; top: 0; } h1{ position: absolute; z-index: 2; border: 1px black solid; width: 500px; left: 0px; } p{ text-align: right; position: relative; z-index: 3; }

  <body> <h1>Этот мешает</h1> <div> <p>Я хочу скопировать этот текст</p> </div> </body>

Grundy grundy 58.6k 7 49 93 · Answer 2 · 2016-12-11T08:14:41

You can set the pointer-events:none header pointer-events:none

 * { box-sizing: border-box; margin: 0; padding: 0; } div { width: 400px; height: 400px; background: gray; position: absolute; top: 0; z-index: 1; } h1 { position: absolute; z-index: 2; border: 1px black solid; width: 500px; left: 0px; pointer-events: none; } p { text-align: right; position: relative; z-index: 3; }

 <body> <h1>Этот мешает</h1> <div> <p>Я хочу скопировать этот текст</p> </div> </body>

@Yuri, but it works, and even, probably, as the author wants.

Layer Overlay Priority

2 answers 2

More articles: