Search code examples
htmlcsspositionabsolute

How can I position one element below another?

I want to put one element under another element. I am using position: absolute in CSS.

 .first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
}
    <div class="first"></div>
    <div class="second"></div>

I want the blue box to be positioned under the red box. How could I achieve this?

Solution

  • just give position : relative to second div and top:315px or what ever you want

    .first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
    position: relative;
    top: 315px;
}
    <html>
<head>

</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
</head>