How can I position one element below another?

html css position absolute
khalid J-A picture khalid J-A · Nov 18, 2016 · Viewed 99.7k times · Source

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

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

Answer

Mudassar Saiyed picture Mudassar Saiyed · Nov 18, 2016

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>

Related questions

Position: absolute and parent height?

I have some containers and their children are only absolute / relatively positioned. How to set containers height so their children will be inside of them? Here's the code: HTML <section id="foo"> <header>Foo</header&…

Read More
Is there any way for "position:absolute" div to retain relative width?

Let's say I have two divs, one inside the other, like so: <html> <body> <div id="outer" style="width:50%"> <div id="inner" style="width:100%"> </div> </div> </body&…

Read More
Text Wrapping around an absolute positioned div

I know there are a few questions about similar topics but they mostly amount to floating the div/image. I need to have the image (and div) positioned absolutely (off to the right) but I simply want the text flow …

Read More