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?

回答1:

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>

回答2:

Here is a solution:

.first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
     box-sizing: border-box;
}
.second{
    position: relative;
    border:2px solid blue;
    width:40%;
    height:200px;
    top: 300px;
    box-sizing: border-box;
}

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

And you can to not point position, because div is block element and will be placed at new line by default.

.first{
     width:70%;
     height:300px;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
}

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

回答3:

Try using clear: both;.

The clear property specifies on which sides of an element floating elements are not allowed to float.

https://www.w3schools.com/cssref/pr_class_clear.asp

来源：https://stackoverflow.com/questions/40676648/how-can-i-position-one-element-below-another

标签

html

css

position

absolute