How can I define an element over another element?

Asked

Viewed 72 times

1

Good morning, good afternoon, good evening.

I’m having trouble using the transform: scale(1.7) in the div:hover, Every time I step the mouse, the div increases, but the one on the side is in front of him, as I can do for this q passed the mouse stay in front?

That is the code:

<!DOCTYPE html>
<html>
<head>
    <style>
        div{background-color: red;
        position: relative;
        width: 100px;
        height: 70px;
        margin: 2% 1%;
        display: inline-block;
        transition: all 0.1s;}
        div:nth-child(2){background-color: blue}
        div:nth-child(3){background-color: green}
        div:nth-child(4){background-color: yellow}
        div:nth-child(5){background-color: black}
        div:hover{transform: scale(1.7)}
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

html5 css3

2 answers

0

You can set the Z-Index

The z-index property specifies a stack order of an element. An element with higher stacking order is in front of an element with a smaller looting order

<!DOCTYPE html>
<html>
<head>
    <style>
        div{background-color: red;
        position: relative;
        width: 100px;
        height: 70px;
        margin: 2% 1%;
        display: inline-block;
        transition: all 0.1s;}
        div:nth-child(2){background-color: blue}
        div:nth-child(3){background-color: green}
        div:nth-child(4){background-color: yellow}
        div:nth-child(5){background-color: black}
        div:hover{transform: scale(1.7)}
        div:hover{Z-Index:9999};
    </style>

</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

  • if you do not transition with appropriate values in the z-index, when taking out the Hover the div will cross the other - for example, do the Hover in the green and take the Pointer from the top, looking yellow to view. (specify a low z-index in the div without Hover to solve) - taking advantage, it pays to edit and leave the spelling of the z-index in minuscula.

0


You can use the z-index property, below I added a link about the property:

dev-media: css z-index

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            background-color: red;
            position: relative;
            width: 100px;
            height: 70px;
            margin: 2% 1%;
            display: inline-block;
            transition: all 0.1s;
        }

        div:nth-child(2) {
            background-color: blue
        }

        div:nth-child(3) {
            background-color: green
        }

        div:nth-child(4) {
            background-color: yellow
        }

        div:nth-child(5) {
            background-color: black
        }


        div {
            z-index: 10;
        }

        div:hover {
            transform: scale(1.7);
            z-index: 9999;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

  • If you don’t transition with appropriate values in the z-index, when you take out the Hover the div will cross the other - for example, do the Hover in the green and take the Pointer from above, looking at the yellow to view. (specify a low z-index in the div without Hover to resolve)

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.