what is the question?
Under the current spec of CSS, for any element, creating a new stacking context is equivalent to being painted as if it's positioned.
Various properties creating a new context like opacity
, isolation
and so on inevitably lead the browser to handle the element with the property as positioned.
For example, if you just add to an element only opacity
less than 1 and no position
, the browser will paint the element as positioned. This means an element with opacity
less than 1 and no position
is always over any non-positioned elements.
Any property creating a new stacking context like isolation
are the same.
You can check this info from this discussion. https://github.com/w3c/csswg-drafts/issues/2717
So does anyone know any "hack" for creating a new stacking context WITHOUT the element being painted as if it's positioned?
why am i asking it?
background
I'm now developing a personal browser extension which adds popups, rect and so on to the web page the user is opening, through DOM scripting.
I don't wanna change anything about the original DOM including style, because I want the basic view of the web page to be kept as the original.
All I can do is just add/insert some new DOMs without destroying the web page.
the main problem
In the development mentioned above, i wanna insert some elements with position: relative
between two div elements: one is without any setting of position
and the other is without any setting of position
but with float
setting.
Please run the below snippet. I wanna insert some positioned elements between them.
<!DOCTYPE html>
<html lang="en">
<body>
<div class="cover">float: left and no-position</div>
<div class="target">no-float and no-position</div>
</body>
</html>
<style>
.target {
color: white;
background-color: red;
height: 200px;
width: 200px;
}
.cover {
color: white;
background-color: blue;
height: 100px;
width: 180px;
float: left;
}
</style>
Of course, just inserting some elements with position: relative
fails, because positioned elements are painted always over non-positioned elements.
Here, if i can create a new stacking context between them, the goal will be achieved.
However, again, under the current spec of CSS, for any element, creating a new stacking context is equivalent to being painted as if it's positioned. That means newly created stacking contexts are always over the floated elements...
So anyone has a solution?? Thank you for taking your precious time!