logo标签列表

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

htmlcsspositionabsolute
27

我想将一个元素放置在另一个元素下面。我正在使用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 是什么意思？你想要隐藏吗？ - Jyothi Babu Araja
不，我的意思是从底部开始的第一个元素之后。 - khalid J-A
6个回答
34

只需将第二个 div 的 position 属性设为 relative，并设置 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>

11

这里是一个解决方案：

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

6
我不是CSS专家，但这似乎应该是第一个答案。 - undefined
1
另外，您可以在类别样式描述中添加"display: block;"，这将导致该类别的元素占据屏幕的整个宽度。因此，在具有"display: block"属性的元素之后创建的元素将自动创建在其下方。 

 .first{
     display: block;
     width:70%;
     height:300px;
     border:1px solid red;
 }
.second{
    display: block;
    border:2px solid blue;
    width:40%;
    height:200px;
}
<div class="first"></div>

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

0

将一个 div 放在另一个 div 下面的一种方法是将第二个 div 放在第一个 div 内部，并使用 top: 100%; 和 position: absolute; 样式来设置第二个 div。第一个 div 应该具有 position: relative; 属性。

.first{
     width:70%;
     height:300px;
     position: relative;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:100%;
    height: 200px;
    position: absolute;
    top: 100%;
    left: 0;
}
<html>
<head>

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

</body>
</head>

0

在父类中使用网格布局。然后添加一个属性place-items: center;。 愉快的编码 :)

2
目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接