Changing z-index with js [duplicate]











up vote
2
down vote

favorite













This question already has an answer here:




  • Why does z-index not work?

    5 answers




I have a problem with a z-index change with js:
I have a bunch of cards



.card

{

    background: rgb(70, 70, 70);

    width: 300px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1 !important;

}


and I change some properties with js:



window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}


If you hover the first card everything is fine, it goes over the second one but as soon as I hover the second one and try to hover over the first one again it breaks: Gif for a better understanding of my problem



I am not an expert in js so if something is horribly wrong point it out but don't be mean.



I've tried the !important tag in the default CSS but it didn't do anything when I inspect the elements the second card keeps the z-index: -1 and the first card has the z-index: 9 but it still draws it beneath it.
I've also tried to set the card[i + 1] to -1 before setting the card[i] to 9 but it did not work.



I've stumbled upon the setAttribute() for the style but it looks like it overrides all the other CSS and that would result in a long string of text in my case ("haven't tested if I put all the CSS in that if it works because it seemed like an ugly solution")



I am out of ideas... P.S. not allowed to use jQuery or another external library.



EDIT code snippet:






window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    setTimeout(1000);

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}

.card

{

    background: rgb(70, 70, 70);

    width: 300px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1;

}

.card:hover

{

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

.card > img

{

    width: 300px;

}

.card-title

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 900;

}

.card-text

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 400;

}

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>








javascript html css







share|improve this question















marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 yesterday


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them with element.classList.add(), element.classList.remove() and element.classList.toggle().
    – Scott Marcus
    yesterday










  • Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
    – Scott Marcus
    yesterday










  • CSS Overrides !important will override all inline styles set on the element.
    – pmkro
    yesterday












  • @ScottMarcus I wasn't. Its in his .card class. Its what's causing the issue.
    – pmkro
    yesterday










  • Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
    – Scott Marcus
    yesterday















up vote
2
down vote

favorite













This question already has an answer here:




  • Why does z-index not work?

    5 answers




I have a problem with a z-index change with js:
I have a bunch of cards



.card

{

    background: rgb(70, 70, 70);

    width: 300px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1 !important;

}


and I change some properties with js:



window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}


If you hover the first card everything is fine, it goes over the second one but as soon as I hover the second one and try to hover over the first one again it breaks: Gif for a better understanding of my problem



I am not an expert in js so if something is horribly wrong point it out but don't be mean.



I've tried the !important tag in the default CSS but it didn't do anything when I inspect the elements the second card keeps the z-index: -1 and the first card has the z-index: 9 but it still draws it beneath it.
I've also tried to set the card[i + 1] to -1 before setting the card[i] to 9 but it did not work.



I've stumbled upon the setAttribute() for the style but it looks like it overrides all the other CSS and that would result in a long string of text in my case ("haven't tested if I put all the CSS in that if it works because it seemed like an ugly solution")



I am out of ideas... P.S. not allowed to use jQuery or another external library.



EDIT code snippet:






window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    setTimeout(1000);

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}

.card

{

    background: rgb(70, 70, 70);

    width: 300px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1;

}

.card:hover

{

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

.card > img

{

    width: 300px;

}

.card-title

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 900;

}

.card-text

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 400;

}

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>








javascript html css







share|improve this question















marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 yesterday


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them with element.classList.add(), element.classList.remove() and element.classList.toggle().
    – Scott Marcus
    yesterday










  • Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
    – Scott Marcus
    yesterday










  • CSS Overrides !important will override all inline styles set on the element.
    – pmkro
    yesterday












  • @ScottMarcus I wasn't. Its in his .card class. Its what's causing the issue.
    – pmkro
    yesterday










  • Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
    – Scott Marcus
    yesterday













up vote
2
down vote

favorite









up vote
2
down vote

favorite












This question already has an answer here:




  • Why does z-index not work?

    5 answers




I have a problem with a z-index change with js:
I have a bunch of cards



.card

{

    background: rgb(70, 70, 70);

    width: 300px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1 !important;

}


and I change some properties with js:



window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}


If you hover the first card everything is fine, it goes over the second one but as soon as I hover the second one and try to hover over the first one again it breaks: Gif for a better understanding of my problem



I am not an expert in js so if something is horribly wrong point it out but don't be mean.



I've tried the !important tag in the default CSS but it didn't do anything when I inspect the elements the second card keeps the z-index: -1 and the first card has the z-index: 9 but it still draws it beneath it.
I've also tried to set the card[i + 1] to -1 before setting the card[i] to 9 but it did not work.



I've stumbled upon the setAttribute() for the style but it looks like it overrides all the other CSS and that would result in a long string of text in my case ("haven't tested if I put all the CSS in that if it works because it seemed like an ugly solution")



I am out of ideas... P.S. not allowed to use jQuery or another external library.



EDIT code snippet:






window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    setTimeout(1000);

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}

.card

{

    background: rgb(70, 70, 70);

    width: 300px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1;

}

.card:hover

{

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

.card > img

{

    width: 300px;

}

.card-title

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 900;

}

.card-text

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 400;

}

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>








javascript html css







share|improve this question
















This question already has an answer here:




  • Why does z-index not work?

    5 answers




I have a problem with a z-index change with js:
I have a bunch of cards



.card

{

    background: rgb(70, 70, 70);

    width: 300px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1 !important;

}


and I change some properties with js:



window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}


If you hover the first card everything is fine, it goes over the second one but as soon as I hover the second one and try to hover over the first one again it breaks: Gif for a better understanding of my problem



I am not an expert in js so if something is horribly wrong point it out but don't be mean.



I've tried the !important tag in the default CSS but it didn't do anything when I inspect the elements the second card keeps the z-index: -1 and the first card has the z-index: 9 but it still draws it beneath it.
I've also tried to set the card[i + 1] to -1 before setting the card[i] to 9 but it did not work.



I've stumbled upon the setAttribute() for the style but it looks like it overrides all the other CSS and that would result in a long string of text in my case ("haven't tested if I put all the CSS in that if it works because it seemed like an ugly solution")



I am out of ideas... P.S. not allowed to use jQuery or another external library.



EDIT code snippet:






window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    setTimeout(1000);

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}

.card

{

    background: rgb(70, 70, 70);

    width: 300px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1;

}

.card:hover

{

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

.card > img

{

    width: 300px;

}

.card-title

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 900;

}

.card-text

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 400;

}

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>







This question already has an answer here:




  • Why does z-index not work?

    5 answers







window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    setTimeout(1000);

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}

.card

{

    background: rgb(70, 70, 70);

    width: 300px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1;

}

.card:hover

{

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

.card > img

{

    width: 300px;

}

.card-title

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 900;

}

.card-text

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 400;

}

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>





window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    setTimeout(1000);

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}

.card

{

    background: rgb(70, 70, 70);

    width: 300px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1;

}

.card:hover

{

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

.card > img

{

    width: 300px;

}

.card-title

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 900;

}

.card-text

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 400;

}

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 

                </div>

            </div>





javascript html css




javascript html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited yesterday

























asked yesterday









Dddsasul

357




357




marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 yesterday


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.






marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 yesterday


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.














  • It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them with element.classList.add(), element.classList.remove() and element.classList.toggle().
    – Scott Marcus
    yesterday










  • Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
    – Scott Marcus
    yesterday










  • CSS Overrides !important will override all inline styles set on the element.
    – pmkro
    yesterday












  • @ScottMarcus I wasn't. Its in his .card class. Its what's causing the issue.
    – pmkro
    yesterday










  • Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
    – Scott Marcus
    yesterday


















  • It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them with element.classList.add(), element.classList.remove() and element.classList.toggle().
    – Scott Marcus
    yesterday










  • Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
    – Scott Marcus
    yesterday










  • CSS Overrides !important will override all inline styles set on the element.
    – pmkro
    yesterday












  • @ScottMarcus I wasn't. Its in his .card class. Its what's causing the issue.
    – pmkro
    yesterday










  • Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
    – Scott Marcus
    yesterday
















It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them with element.classList.add(), element.classList.remove() and element.classList.toggle().
– Scott Marcus
yesterday




It's much simpler to set up CSS classes ahead of time and then just add/remove/toggle them with element.classList.add(), element.classList.remove() and element.classList.toggle().
– Scott Marcus
yesterday












Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
– Scott Marcus
yesterday




Also, your GIF doesn't really illustrate a problem. It seems like hovering over either card scales that card and then hovering the other does the same to that card. Then going back to the first card seems to work again.
– Scott Marcus
yesterday












CSS Overrides !important will override all inline styles set on the element.
– pmkro
yesterday






CSS Overrides !important will override all inline styles set on the element.
– pmkro
yesterday














@ScottMarcus I wasn't. Its in his .card class. Its what's causing the issue.
– pmkro
yesterday




@ScottMarcus I wasn't. Its in his .card class. Its what's causing the issue.
– pmkro
yesterday












Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
– Scott Marcus
yesterday




Also, your first two loops just override the initial styles for your cards that were set in the CSS class. That seems a waste. Just set the class to the initial state you want.
– Scott Marcus
yesterday












1 Answer
1






active

oldest

votes

















up vote
4
down vote



accepted










z-index only works on positioned elements. You are using float, which isn't the same thing.



The whole point of z-index is to be able to layer elements. But, layering (beyond one item overlapping another due to overflow) can't happen when all the elements are in the normal document "flow". In order for true layering to be able to happen, you must take items that need to be layered out of the normal document flow and that is done by specifying the CSS position as relative, absolute or fixed.



From MDN:




The z-index CSS property sets the z-order of a positioned element
and its descendants or flex items. Overlapping elements with a larger
z-index cover those with a smaller one.




Add position:relative to the .card class.






window.onload = function()

{

    var cards = document.querySelectorAll(".card");

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.margin = "0 5px 0 5px";

        cards[i].style.opacity = "1";

    }

    setTimeout(1000);

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].style.transition = ".4s";

    }

    for (let i = 0; i < cards.length; i++)

    {

        cards[i].onmouseover = function()

        {

            cards[i].style.zIndex = "9";

            cards[i].style.transform = "scale(1.1)";

        }

        cards[i].onmouseout = function()

        {

            cards[i].style.zIndex = "-1";

            cards[i].style.transform = "scale(1)";

        }

    }

}

image { width:200px; } 

.card

{

    background: rgb(70, 70, 70);

    width: 200px;

    padding-bottom: 10px;

    float: left;

    margin: 100px 5px 0 5px;

    opacity: 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    transition: 1s;

    z-index: -1;

    position:relative; /* z-index only works on positioned elements */

}

.card:hover

{

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

}

.card > img

{

    width: 300px;

}

.card-title

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 900;

}

.card-text

{

    margin-top: 5px;

    font-family: 'Roboto', sans-serif;

    font-weight: 400;

}

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random 

                </div>

            </div>

<div class="card">

                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">

                <div class="card-title">

                    Consoles

                </div>

                <div class="card-text">

                    some random text some random text some random text some random text some random text some random text some random text some random 

                </div>

            </div>








share|improve this answer






























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    4
    down vote



    accepted










    z-index only works on positioned elements. You are using float, which isn't the same thing.



    The whole point of z-index is to be able to layer elements. But, layering (beyond one item overlapping another due to overflow) can't happen when all the elements are in the normal document "flow". In order for true layering to be able to happen, you must take items that need to be layered out of the normal document flow and that is done by specifying the CSS position as relative, absolute or fixed.



    From MDN:




    The z-index CSS property sets the z-order of a positioned element
    and its descendants or flex items. Overlapping elements with a larger
    z-index cover those with a smaller one.




    Add position:relative to the .card class.






    window.onload = function()
    
{
    
    var cards = document.querySelectorAll(".card");
    
    for (let i = 0; i < cards.length; i++)
    
    {
    
        cards[i].style.margin = "0 5px 0 5px";
    
        cards[i].style.opacity = "1";
    
    }
    
    setTimeout(1000);
    
    for (let i = 0; i < cards.length; i++)
    
    {
    
        cards[i].style.transition = ".4s";
    
    }
    
    for (let i = 0; i < cards.length; i++)
    
    {
    
        cards[i].onmouseover = function()
    
        {
    
            cards[i].style.zIndex = "9";
    
            cards[i].style.transform = "scale(1.1)";
    
        }
    
        cards[i].onmouseout = function()
    
        {
    
            cards[i].style.zIndex = "-1";
    
            cards[i].style.transform = "scale(1)";
    
        }
    
    }
    
}

    image { width:200px; } 
    
.card
    
{
    
    background: rgb(70, 70, 70);
    
    width: 200px;
    
    padding-bottom: 10px;
    
    float: left;
    
    margin: 100px 5px 0 5px;
    
    opacity: 0;
    
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    
    transition: 1s;
    
    z-index: -1;
    
    position:relative; /* z-index only works on positioned elements */
    
}
    
.card:hover
    
{
    
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    
}
    
.card > img
    
{
    
    width: 300px;
    
}
    
.card-title
    
{
    
    margin-top: 5px;
    
    font-family: 'Roboto', sans-serif;
    
    font-weight: 900;
    
}
    
.card-text
    
{
    
    margin-top: 5px;
    
    font-family: 'Roboto', sans-serif;
    
    font-weight: 400;
    
}

    <div class="card">
    
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
    
                <div class="card-title">
    
                    Consoles
    
                </div>
    
                <div class="card-text">
    
                    some random text some random text some random text some random text some random text some random text some random text some random 
    
                </div>
    
            </div>
    
<div class="card">
    
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
    
                <div class="card-title">
    
                    Consoles
    
                </div>
    
                <div class="card-text">
    
                    some random text some random text some random text some random text some random text some random text some random text some random 
    
                </div>
    
            </div>








    share|improve this answer



























      up vote
      4
      down vote



      accepted










      z-index only works on positioned elements. You are using float, which isn't the same thing.



      The whole point of z-index is to be able to layer elements. But, layering (beyond one item overlapping another due to overflow) can't happen when all the elements are in the normal document "flow". In order for true layering to be able to happen, you must take items that need to be layered out of the normal document flow and that is done by specifying the CSS position as relative, absolute or fixed.



      From MDN:




      The z-index CSS property sets the z-order of a positioned element
      and its descendants or flex items. Overlapping elements with a larger
      z-index cover those with a smaller one.




      Add position:relative to the .card class.






      window.onload = function()
      
{
      
    var cards = document.querySelectorAll(".card");
      
    for (let i = 0; i < cards.length; i++)
      
    {
      
        cards[i].style.margin = "0 5px 0 5px";
      
        cards[i].style.opacity = "1";
      
    }
      
    setTimeout(1000);
      
    for (let i = 0; i < cards.length; i++)
      
    {
      
        cards[i].style.transition = ".4s";
      
    }
      
    for (let i = 0; i < cards.length; i++)
      
    {
      
        cards[i].onmouseover = function()
      
        {
      
            cards[i].style.zIndex = "9";
      
            cards[i].style.transform = "scale(1.1)";
      
        }
      
        cards[i].onmouseout = function()
      
        {
      
            cards[i].style.zIndex = "-1";
      
            cards[i].style.transform = "scale(1)";
      
        }
      
    }
      
}

      image { width:200px; } 
      
.card
      
{
      
    background: rgb(70, 70, 70);
      
    width: 200px;
      
    padding-bottom: 10px;
      
    float: left;
      
    margin: 100px 5px 0 5px;
      
    opacity: 0;
      
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
      
    transition: 1s;
      
    z-index: -1;
      
    position:relative; /* z-index only works on positioned elements */
      
}
      
.card:hover
      
{
      
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
      
}
      
.card > img
      
{
      
    width: 300px;
      
}
      
.card-title
      
{
      
    margin-top: 5px;
      
    font-family: 'Roboto', sans-serif;
      
    font-weight: 900;
      
}
      
.card-text
      
{
      
    margin-top: 5px;
      
    font-family: 'Roboto', sans-serif;
      
    font-weight: 400;
      
}

      <div class="card">
      
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
      
                <div class="card-title">
      
                    Consoles
      
                </div>
      
                <div class="card-text">
      
                    some random text some random text some random text some random text some random text some random text some random text some random 
      
                </div>
      
            </div>
      
<div class="card">
      
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
      
                <div class="card-title">
      
                    Consoles
      
                </div>
      
                <div class="card-text">
      
                    some random text some random text some random text some random text some random text some random text some random text some random 
      
                </div>
      
            </div>








      share|improve this answer

























        up vote
        4
        down vote



        accepted







        up vote
        4
        down vote



        accepted






        z-index only works on positioned elements. You are using float, which isn't the same thing.



        The whole point of z-index is to be able to layer elements. But, layering (beyond one item overlapping another due to overflow) can't happen when all the elements are in the normal document "flow". In order for true layering to be able to happen, you must take items that need to be layered out of the normal document flow and that is done by specifying the CSS position as relative, absolute or fixed.



        From MDN:




        The z-index CSS property sets the z-order of a positioned element
        and its descendants or flex items. Overlapping elements with a larger
        z-index cover those with a smaller one.




        Add position:relative to the .card class.






        window.onload = function()
        
{
        
    var cards = document.querySelectorAll(".card");
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].style.margin = "0 5px 0 5px";
        
        cards[i].style.opacity = "1";
        
    }
        
    setTimeout(1000);
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].style.transition = ".4s";
        
    }
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].onmouseover = function()
        
        {
        
            cards[i].style.zIndex = "9";
        
            cards[i].style.transform = "scale(1.1)";
        
        }
        
        cards[i].onmouseout = function()
        
        {
        
            cards[i].style.zIndex = "-1";
        
            cards[i].style.transform = "scale(1)";
        
        }
        
    }
        
}

        image { width:200px; } 
        
.card
        
{
        
    background: rgb(70, 70, 70);
        
    width: 200px;
        
    padding-bottom: 10px;
        
    float: left;
        
    margin: 100px 5px 0 5px;
        
    opacity: 0;
        
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        
    transition: 1s;
        
    z-index: -1;
        
    position:relative; /* z-index only works on positioned elements */
        
}
        
.card:hover
        
{
        
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
        
}
        
.card > img
        
{
        
    width: 300px;
        
}
        
.card-title
        
{
        
    margin-top: 5px;
        
    font-family: 'Roboto', sans-serif;
        
    font-weight: 900;
        
}
        
.card-text
        
{
        
    margin-top: 5px;
        
    font-family: 'Roboto', sans-serif;
        
    font-weight: 400;
        
}

        <div class="card">
        
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
        
                <div class="card-title">
        
                    Consoles
        
                </div>
        
                <div class="card-text">
        
                    some random text some random text some random text some random text some random text some random text some random text some random 
        
                </div>
        
            </div>
        
<div class="card">
        
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
        
                <div class="card-title">
        
                    Consoles
        
                </div>
        
                <div class="card-text">
        
                    some random text some random text some random text some random text some random text some random text some random text some random 
        
                </div>
        
            </div>








        share|improve this answer














        z-index only works on positioned elements. You are using float, which isn't the same thing.



        The whole point of z-index is to be able to layer elements. But, layering (beyond one item overlapping another due to overflow) can't happen when all the elements are in the normal document "flow". In order for true layering to be able to happen, you must take items that need to be layered out of the normal document flow and that is done by specifying the CSS position as relative, absolute or fixed.



        From MDN:




        The z-index CSS property sets the z-order of a positioned element
        and its descendants or flex items. Overlapping elements with a larger
        z-index cover those with a smaller one.




        Add position:relative to the .card class.






        window.onload = function()
        
{
        
    var cards = document.querySelectorAll(".card");
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].style.margin = "0 5px 0 5px";
        
        cards[i].style.opacity = "1";
        
    }
        
    setTimeout(1000);
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].style.transition = ".4s";
        
    }
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].onmouseover = function()
        
        {
        
            cards[i].style.zIndex = "9";
        
            cards[i].style.transform = "scale(1.1)";
        
        }
        
        cards[i].onmouseout = function()
        
        {
        
            cards[i].style.zIndex = "-1";
        
            cards[i].style.transform = "scale(1)";
        
        }
        
    }
        
}

        image { width:200px; } 
        
.card
        
{
        
    background: rgb(70, 70, 70);
        
    width: 200px;
        
    padding-bottom: 10px;
        
    float: left;
        
    margin: 100px 5px 0 5px;
        
    opacity: 0;
        
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        
    transition: 1s;
        
    z-index: -1;
        
    position:relative; /* z-index only works on positioned elements */
        
}
        
.card:hover
        
{
        
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
        
}
        
.card > img
        
{
        
    width: 300px;
        
}
        
.card-title
        
{
        
    margin-top: 5px;
        
    font-family: 'Roboto', sans-serif;
        
    font-weight: 900;
        
}
        
.card-text
        
{
        
    margin-top: 5px;
        
    font-family: 'Roboto', sans-serif;
        
    font-weight: 400;
        
}

        <div class="card">
        
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
        
                <div class="card-title">
        
                    Consoles
        
                </div>
        
                <div class="card-text">
        
                    some random text some random text some random text some random text some random text some random text some random text some random 
        
                </div>
        
            </div>
        
<div class="card">
        
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
        
                <div class="card-title">
        
                    Consoles
        
                </div>
        
                <div class="card-text">
        
                    some random text some random text some random text some random text some random text some random text some random text some random 
        
                </div>
        
            </div>








        window.onload = function()
        
{
        
    var cards = document.querySelectorAll(".card");
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].style.margin = "0 5px 0 5px";
        
        cards[i].style.opacity = "1";
        
    }
        
    setTimeout(1000);
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].style.transition = ".4s";
        
    }
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].onmouseover = function()
        
        {
        
            cards[i].style.zIndex = "9";
        
            cards[i].style.transform = "scale(1.1)";
        
        }
        
        cards[i].onmouseout = function()
        
        {
        
            cards[i].style.zIndex = "-1";
        
            cards[i].style.transform = "scale(1)";
        
        }
        
    }
        
}

        image { width:200px; } 
        
.card
        
{
        
    background: rgb(70, 70, 70);
        
    width: 200px;
        
    padding-bottom: 10px;
        
    float: left;
        
    margin: 100px 5px 0 5px;
        
    opacity: 0;
        
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        
    transition: 1s;
        
    z-index: -1;
        
    position:relative; /* z-index only works on positioned elements */
        
}
        
.card:hover
        
{
        
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
        
}
        
.card > img
        
{
        
    width: 300px;
        
}
        
.card-title
        
{
        
    margin-top: 5px;
        
    font-family: 'Roboto', sans-serif;
        
    font-weight: 900;
        
}
        
.card-text
        
{
        
    margin-top: 5px;
        
    font-family: 'Roboto', sans-serif;
        
    font-weight: 400;
        
}

        <div class="card">
        
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
        
                <div class="card-title">
        
                    Consoles
        
                </div>
        
                <div class="card-text">
        
                    some random text some random text some random text some random text some random text some random text some random text some random 
        
                </div>
        
            </div>
        
<div class="card">
        
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
        
                <div class="card-title">
        
                    Consoles
        
                </div>
        
                <div class="card-text">
        
                    some random text some random text some random text some random text some random text some random text some random text some random 
        
                </div>
        
            </div>





        window.onload = function()
        
{
        
    var cards = document.querySelectorAll(".card");
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].style.margin = "0 5px 0 5px";
        
        cards[i].style.opacity = "1";
        
    }
        
    setTimeout(1000);
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].style.transition = ".4s";
        
    }
        
    for (let i = 0; i < cards.length; i++)
        
    {
        
        cards[i].onmouseover = function()
        
        {
        
            cards[i].style.zIndex = "9";
        
            cards[i].style.transform = "scale(1.1)";
        
        }
        
        cards[i].onmouseout = function()
        
        {
        
            cards[i].style.zIndex = "-1";
        
            cards[i].style.transform = "scale(1)";
        
        }
        
    }
        
}

        image { width:200px; } 
        
.card
        
{
        
    background: rgb(70, 70, 70);
        
    width: 200px;
        
    padding-bottom: 10px;
        
    float: left;
        
    margin: 100px 5px 0 5px;
        
    opacity: 0;
        
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        
    transition: 1s;
        
    z-index: -1;
        
    position:relative; /* z-index only works on positioned elements */
        
}
        
.card:hover
        
{
        
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
        
}
        
.card > img
        
{
        
    width: 300px;
        
}
        
.card-title
        
{
        
    margin-top: 5px;
        
    font-family: 'Roboto', sans-serif;
        
    font-weight: 900;
        
}
        
.card-text
        
{
        
    margin-top: 5px;
        
    font-family: 'Roboto', sans-serif;
        
    font-weight: 400;
        
}

        <div class="card">
        
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
        
                <div class="card-title">
        
                    Consoles
        
                </div>
        
                <div class="card-text">
        
                    some random text some random text some random text some random text some random text some random text some random text some random 
        
                </div>
        
            </div>
        
<div class="card">
        
                <img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg">
        
                <div class="card-title">
        
                    Consoles
        
                </div>
        
                <div class="card-text">
        
                    some random text some random text some random text some random text some random text some random text some random text some random 
        
                </div>
        
            </div>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited yesterday

























        answered yesterday









        Scott Marcus

        37.8k51936




        37.8k51936















            -

            Popular posts from this blog

            What visual should I use to simply compare current year value vs last year in Power BI desktop

            Image
            0 I have column SubToBind that shows current year ratio and column PY SubToBind which shows previous year ratio. How can I simply create a card that would be displaying them both in a nice way? Something like that: I cannot achieve that with regular card, I also tried Card with States by OKViz but also unable to see both values. In KPI visual - I dont like the word "Goal", it will confuse end users. Are there any cards or other visuals that would do the job? Thanks powerbi dax powerbi-embedded share | improve this question edited Jun 11 '18 at 20:11 Oleg ...
            Read more

            How to ignore python UserWarning in pytest?

            Image
            up vote 1 down vote favorite I am using openpyxl for parsing .xlsm files, and pytest for testing. When I open a file, I get the: OpenPyxl -> UserWarning: Data Validation extension is not supported and will be removed That is not really a problem bcs. program works and I can't change the .xlsm file to fix that. But... When I run pytest with something like: def test_wrong_file_format(): assert check_excel(open_excel('file.xlsm')) == True I will get the warning i mentioned altought check_excel(open_excel('file.xlsm')) returns True and the test should suceed... Is there a nice way to tell the pytest that "It's not a bug it's a feature" and tests should pass even when they get this warning? Is there other way than using something like: with pytest.warns(UserWarning): ...
            Read more

            Alexandru Averescu

            Image
            Alexandre Averescu Alexandru Averescu Naissance 3 avril 1859 Babele, Ismail  (ro) près de Izmaïl (principauté de Moldavie) Décès 2 octobre 1938 (à 79 ans) [ 1 ] Bucarest Origine   Roumanie Arme cavalerie Grade Maréchal Années de service 1901-1917 Commandement chef d'état-major général 2 e  armée 3 e  armée Groupe d'armée sud armée du Danube Conflits Guerre russo-turque de 1877-1878 Deuxième guerre balkanique Première Guerre mondiale Faits d'armes Bataille de Turtucaia/Tutrakan Bataille de Mărăști Distinctions Autres fonctions 3 fois président du Conseil des ministres ministre des Affaires étrangères ministre sans portefeuille conseiller de la Couronne modifier   Alexandre Averescu (en roumain : Alexandru Averescu .mw-parser-output .prononciation>a{background:url("//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/11px-Loudspeaker.svg.png")center ...
            Read more