Bom dia, boa tarde, boa noite.

Estou tendo problemas ao utilizar o `transform: scale(1.7)` no `div:hover`, toda vez q passo o mouse, o `div` aumenta, mas o do lado fica na frente dele, como posso fazer pra q esse q passei o mouse fique na frente?

**Esse é o código:**

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!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>

<!-- end snippet -->