2

Here: https://jsfiddle.net/dcgwtf1w/9/

As the title says. Why would simply a change to the "filter" attribute change anything about the layering here? And how do I undo it? I'm running the latest version of Chrome as of posting this.

HTML:

<div id="container">
    <div><p>Text</p></div>
    <div></div>
</div>

<button id="toggle">Toggle</button>

CSS:

#container {
    font-size: 0;
    font-family: sans-serif;
}
#container div {
    background: crimson;
    width: 100px;
    height: 50px;
    display: inline-block;
    position: relative;
    font-size: 24px;
}
p {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    line-height: 50px;
    width: 200%;
    text-align: center;
    z-index: 2;
}
button {
    margin-top: 10px;
    display: block;
}

JavaScript:

const div1 = document.querySelectorAll("#container div")[0];
const div2 = document.querySelectorAll("#container div")[1];

let on = false;

document.querySelector("#toggle").addEventListener("click", function() {
    const value = on ? "brightness(1)" : "brightness(2)";
    div1.style.filter = div2.style.filter = value;

    on ^= true;
});
DavidsKanal
  • 655
  • 11
  • 15
  • 1
    The code for your question must be **in the question**, not just linked. Copy the code from jsfiddle.net into your question, and mark it as code by selecting it and using the code toolbar button (`{}`) or pressing Ctrl+K. For more editing help, click the [?] toolbar icon. – Heretic Monkey May 26 '18 at 17:27
  • Thanks for pointing that out, edited. – DavidsKanal May 26 '18 at 17:32
  • 1
    I don't think the question is an exact duplicate, but I understand that the linked question provide an explanation. By the way, I provide a workaround: the stacking context acts like a `overflow: hidden`, so a solution could be applying the filter to the paret element `#container` in place of `#container div`. – Christian Vincenzo Traina May 26 '18 at 18:22
  • This is not a duplicate question. I think sometimes the one who marks it duplicate just doesn't know the solution. I've seen this a lot on stack....Sad. – Jonny May 26 '18 at 18:44
  • @DavidsKanal i fixed it on your jsfiddle since it was voted closed. https://jsfiddle.net/dcgwtf1w/12/ – Jonny May 26 '18 at 18:51
  • In this question happened what in the "StackOverflow is not very welcoming" blog post said that shouldn't happen – Christian Vincenzo Traina May 26 '18 at 19:17
  • @Jonny the one whe marked as duplicate know the solution but doesn't want to repeat it again ;) ... did you check the duplicate question before saying it's not a duplicate? – Temani Afif May 26 '18 at 19:23
  • @CristianTraìna the question doesn't need to be an *exact* duplicate like you said ... the ones I closed with explain this behavior, and if you know what is happening you will understand the issue and how to fix it – Temani Afif May 26 '18 at 19:24
  • @Temani Afif clearly they dont know "what is happening" they are asking a question. He asked for the reason why and these questions do not address it my friend. – Jonny May 26 '18 at 19:29
  • @Jonny so can you tell me what is happening? :) if you think this answer is not suitable https://stackoverflow.com/a/25764603/8620333 and its link to the documentation is not what needed here ... sorry but this answer gives the needed explanation and the link to the documentation explain exactly the painting order of the elements ... few minutes reading and we know what is happening ;) – Temani Afif May 26 '18 at 19:31
  • i already have given the solution via jsfiddle so OP can learn what has happened click the provided link above so you can learn a solution to this question. – Jonny May 26 '18 at 19:33
  • @Jonny thank you for giving him the solution :) me I gave him the explanation, so we both helped the OP like we are supposing to do in this website ;) – Temani Afif May 26 '18 at 19:41

0 Answers0