Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
From the specifcation:
A computed value of other than none results in the creation of a stacking context the same way that CSS opacity does for values other than 1.
Then considering the painting order:
- All positioned, opacity or transform descendants, in tree order that fall into the following categories:
- All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
For those with 'z-index: auto', treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one.
For those with 'z-index: 0' treat the stacking context generated atomically.- All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.
- All transform descendants with transform other than none, in tree order, create a stacking context generated atomically.
The element with clip-path
is painted at the step (8) and the image will be painted before if has no position set
- For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block equivalent ...
If you add position:relative
to image it will be postioned and will fall under the step (8) and the tree order will decide making it above the clip-path
element
Here is the same code with opacity
where you will have the same painting order:
body {
padding: 1em;
}
header {
background: #a00;
opacity:0.8;
}
h1 {
margin: 0;
padding: 2em;
font: 300%;
color: white;
text-align: center;
}
section {
background: #ccc;
padding-top:5em;
margin-top:-5em;
}
img {
margin-top: -10em;
}
<header>
<h1>Header Content</h1>
</header>
<section>
<img src="https://via.placeholder.com/330/0000FF/808080"/>
</section>
CSS: backdrop-filter messing up stacking order
From the docs:
The backdrop-filter CSS property lets you apply graphical effects such
as blurring or color shifting to the area behind an element.
This means that the filter will not apply to the areas in front of the element. So for that just have a z-index
property on your image with a non-static position
img {
position: relative;
z-index: 2; /* arbitrary value - the higher this is, the more the element will be on top of other elements */
}
CSS filter property disabling fixed position on navigation bar
Just add z-index to your nav element as follow
nav{
position: fixed;
background-color: #fff;
z-index:999;
}
nav ul{
margin: 0;
padding: 0;
}
.navbar-brand{
padding-right: 20px;
}
nav li{
display: inline-block;
padding: 10px;
}
nav a{
color: #000;
text-decoration: none;
}
nav a:hover{
color: #ff6600;
text-decoration: none;
}
.title-image img{
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">services</a>
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
Tooltip invisible after using backdrop-filter
This answer may help.
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
I'd suggest removing the backdrop-filter
from div.title
, and add it to a pseudo-element instead.
div.tile {
width: 400px;
height: auto;
display: inline-block;
background: RGBA(24, 24, 19, 0.8);
padding-bottom: 30px;
/* REMOVE backdrop-filter: blur(4px); */
position: relative; /* <-- ADD */
}
div.tile:before {
content: '';
backdrop-filter: blur(4px);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
Related Topics
Order of Prioritization When Using Multiple Contradictory CSS Files
How to Use a CSS Wildcard in the Middle of an Attribute Selector
Bootstrap Modal Sitting Behind Backdrop
Cross Browser Way to Rotate Image Using CSS
Equal Height of Elements Inside Grid Item with CSS Grid Layout
Why Does Stacking Order Change on Webkit Filter Hover
How to Change Color of Icons in Font Awesome 5
Change Outline for Outlinedinput with React Material-Ui
Are Flex Items Block Level Element
Bootstrap Change Order of Columns
Margin-Top Not Working with Clear: Both
I Want to Vertical-Align Text in Select Box
Good Rules for Setting Up Print CSS
CSS Get Height of Screen Resolution
Google Warning: Resource Interpreted as Font But Transferred with Mime Type Application/Octet-Stream
Convert 8-Digit Hex Colors to Rgba Colors
What's the Difference Between HTML[Lang="En"] and HTML:Lang(En) in CSS