Jak zrobić by jeden div był pod drugim?

0

Jak zrobić w tym kodzie by fioletowy kwadrat był pod divem container?

<!DOCTYPE html>
<html lang="pl">
    <head>
        <title></title>
        <meta name="heywords" content="">
        <meta name="description">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css.css">
        <script src="main.JS"></script>
    </head>
    <body>
            
            <div id="karton"></div>
            
            <div id="container"></div>
            
    </body>
</html>

body{
    background-color: #14213D ;
    
}
#container{
    width: 1000px;
    height: 1500px;
    background-color: teal;
    margin-top: 40px;
    background: linear-gradient(30deg, #000000 40%,#e5e5e5 100%);
    border-radius: 50px;
    margin-left: 250px;
    filter: blur(30px);
    opacity: 15%;
    position:absolute;
}

#karton{
    background-color: violet;
    width: 200px;
    height: 200px;
    margin-left: 200px;
    top: 400px;
}
1

Zdefiniuj pod.

0

container ma position:absolute więc z samej definicji nie będzie się układał pod ani obok innych elementów.
Absolute oznacza pozycję bezwzględną wobec całej strony lub pierwszego nadrzędnego elementu z position:relative

#container{
    width: 1000px;
    height: 1500px;
    background-color: teal;
    margin-top: 40px;
    background: linear-gradient(30deg, #000000 40%,#e5e5e5 100%);
    border-radius: 50px;
    margin-left: 250px;
    filter: blur(30px);
    opacity: 15%;
    position:absolute;   <<<<<<------------------------------- TUTAJ
}

Czyli jeśli chcesz zrobić drugi pod tym pierwszym to także powinien mieć position absolute albo oba włożyć w jeden DIV.

1 użytkowników online, w tym zalogowanych: 0, gości: 1