如何将一个元素定位在另一个元素下方？答案

【问题标题】：How can I position one element below another?如何将一个元素定位在另一个元素下方？
【发布时间】：2019-12-17 23:52:07
【问题描述】：

我想将一个元素放在另一个元素之下。我在 CSS 中使用position: absolute。

 .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>

我希望蓝色框位于红色框下方。我怎样才能做到这一点？

【问题讨论】：

你的under是什么意思？你想隐藏吗？
不，我的意思是在底部的第一个元素之后

标签： html css position absolute

【解决方案1】：

只需给出位置：相对于第二个 div 和 top:315px 或任何你想要的

.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】：

这里有一个解决方案：

.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>

你也可以不指向position，因为div是块元素，默认会放在新行。

.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】：

尝试使用clear: both;。

clear 属性指定元素的哪些边上不允许浮动元素浮动。

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

【讨论】：