为什么这个div不相对于它的父节点定位呢？
为什么这个div不相对于它的父节点定位呢？
提问于 2022-07-15 23:14:41
我试图为一个时钟做一个接口，其中一个按钮需要放置在它的容器div的底部。这是我使用的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Absolute Positioning Problem</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#container {
margin: auto;
margin-top: 10px;
width: 90%;
aspect-ratio: 2 / 1;
background-color: green;
display: flex;
}
#blueBox {
width: 50%;
height: 100%;
background-color: blue;
position: relative;
left: 0px;
top: 0px;
}
#redBox {
width: 50%;
height: 100%;
background-color: red;
position: relative;
right: 0px;
top: 0px;
}
#topBox {
width: 15%;
aspect-ratio: 2 / 1;
position: absolute;
left: 42.5%;
background-color: grey;
}
/* This div is supposed to be stuck to the bottom of the #container
div but it's on the bottom of the html element for some reason */
#bottomBox {
width: 15%;
aspect-ratio: 2 / 1;
position: absolute;
left: 42.5%;
bottom: 0;
background-color: black;
}
</style>
</head>
<body>
<div id="container">
<div id="blueBox"></div>
<div id="redBox"></div>
<div id="topBox"></div>
<div id="bottomBox"></div>
</div>
</body>
</html>由于某些原因，#底部框相对于html页面而不是它的容器(#容器)定位，有人知道为什么吗？或者我怎么能解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-15 23:28:18
将position: relative添加到#container
每w3文档
一个具有位置:绝对值的元素；相对于最近的定位祖先(而不是相对于视图端口定位，比如固定)。
但是，如果绝对定位元素没有定位祖先，则使用文档正文，并随页面滚动而移动。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73000384
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号