绝对定位:为什么我的盒子被抵消了？
绝对定位:为什么我的盒子被抵消了？
提问于 2020-05-13 18:00:21
这似乎是一个相当基本的问题，但我只是在寻找一些明确性。
背景：
我正在开发一个相当复杂的网站，我有一个展示的想法，包括一系列的盒子，可以衍生到屏幕上。由于原因太复杂，无法在这里解释，我决定组织这些框的最佳方式是通过我的HTML中的父-子结构。这是因为设置子div的位置的值是100%的(顶部，左，右，底部)是很好的方法，为方框，以泰塞拉，而不是重叠。
以下是我的HTML：
.box-1,
.box-2,
.box-3,
.box-4 {
display: flex;
border: solid black;
justify-content: center;
align-items: center;
}
.box-1 {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
border: solid rgb(72, 255, 72);
border-width: 3px;
}
.box-2 {
position: absolute;
top: 0%;
left: 100%;
width: 150px;
height: 150px;
border: solid rgb(255, 72, 72);
border-width: 3px;
}
.box-3 {
position: absolute;
top: 0%;
left: 100%;
width: 150px;
height: 150px;
border: solid rgb(218, 255, 56);
border-width: 3px;
}
.box-4 {
position: absolute;
top: 0%;
left: 100%;
width: 150px;
height: 150px;
border: solid rgb(112, 86, 255);
border-width: 3px;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content "text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="box-1">
box1
<div class="box-2">
box2
<div class="box-3">
box3
<div class="box-4">
box4
</div>
</div>
</div>
</div>
</body>
</html>
有谁知道为什么我的每个盒子都在最高值中被抵消了吗？这跟利润率有关系吗？
下面是我要说的一个img：
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-13 18:07:31
原因是因为top: 0%。如果你删除它，它将并排对齐。其推理是因为top属性将元素的顶部边沿设置为0%，从其父容器的顶部边缘向下。父容器的边框位于外部，这就是为什么它看起来具有级联效应。边框的底部是元素的顶部边缘。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61781652
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号