问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

我希望将蓝色框定位在红色框下方。我怎么能做到这一点？

原文由 khalid J-A 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsspositionabsolute
阅读 1.3k
2 个回答
得票最新
社区维基
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>

原文由 Mudassar Saiyed 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

这是一个解决方案：

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

原文由 Banzay 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题