kha*_*J-A 10 html css position absolute
我想把一个元素放在另一个元素下面.我position: absolute在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>我希望蓝色框位于红色框下方.我怎么能实现这个目标？
Mud*_*yed 14
只给出位置:相对于第二个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>这是一个解决方案：
.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是block元素，并且默认情况下将放置在新行中。
.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>