如何将一个元素放在另一个元素下?

时间:2016-11-18 12:01:17

标签: html css position absolute

我想把一个元素放在另一个元素下面。我在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>

我希望蓝色方框位于红色方框下方。 我怎么能做到这一点?

3 个答案:

答案 0 :(得分:12)

只需给出位置:相对于第二个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>

答案 1 :(得分:3)

这是一个解决方案:

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

答案 2 :(得分:1)

尝试使用clear: both;

  

clear属性指定不允许在元素的哪一侧浮动元素。

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