CODEWITHSUNDEEP
htmlcss
Fris Piet
Fris Piet

Reputation: 37

How do you swap 2 elements, so that the one element is before the other one

I have a container from css and a <td>, at the moment the container is in the front of the <td>, but I need the <td> to be in the front. How do I change them around.

The is showing the data that must be displayed The container is showing a animated border that must show in the <td> border. Both are working, just need to swap them.

I also have tried to make the width more in the <td> for the script in their, but struggling to get it to work.

/* containere */
.containere{
    width: 300px;
    border-radius: 20px;
    height: 190px;
    background: #1e1e1e;    
    display: grid;
    justify-content: center;
    align-content: center;
    position: relative;
    overflow: hidden;
}
.containere span{
color: #fff;
font-size: 30px;
font-weight: bold;
font-family: Consolas, monaco, monospace;
z-index: 1;
}
.containere::before{
content: '';
position: absolute;
width: 40px;
height: 300px;
left: 75px;
top: -100px;
background: linear-gradient(#FFFF00, #0033FF);
animation: animate 2s linear infinite;
}
.containere::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: #29303f;
    border-radius: 18px;
}
<!DOCTYPE html>
<html lang='en'>

<head>

    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Lewendige prys</title>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
    
    <link href='https://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet'>
    
    
    <link rel='stylesheet' href='./live.css'>
    <link rel="stylesheet" href="./Wafy.css" />
    <link rel="stylesheet" href="./difcol.css" />
    
</head>

<body>


 
<table>
    <tr>
        <td class='containere' style="padding-right: 30px">
            <crypto-converter-widget shadow symbol live background-color="#44CF6C" border-radius="0.60rem" fiat="united-states-dollar" crypto="shiba-inu" amount="1" decimal-places="8"></crypto-converter-widget><a href="https://currencyrate.today/" target="_blank" rel="noopener">CurrencyRate.Today</a><script async src="https://cdn.jsdelivr.net/gh/dejurin/[email protected]/dist/latest.min.js"></script>
        </td>
    </tr>
</table>

Upvotes: 0

Views: 53

Answers (1)

Boonster
Boonster

Reputation: 86

Adding style="z-index: 2" to <crypto-converter-widget...> will keep it in front. You may need to play with the .containere dimensions, as the widget isn't the same shape.

<table>
    <tr>
        <td class='containere'>
            <crypto-converter-widget shadow symbol live background-color="#44CF6C" border-radius="0.60rem" fiat="united-states-dollar" crypto="shiba-inu" amount="1" decimal-places="8" style="z-index: 2"></crypto-converter-widget><a href="https://currencyrate.today/" target="_blank" rel="noopener">CurrencyRate.Today</a><script async src="https://cdn.jsdelivr.net/gh/dejurin/[email protected]/dist/latest.min.js"></script>
        </td>
    </tr>
</table>

Upvotes: 1

Related Questions