英文:
Why does the last absolutely positioned element misbehave?
问题
我有一个绝对定位的父元素和三个子元素。
当我将第一个子元素设置为绝对定位时，第二个子元素会向上移动并位于第一个子元素的后面。这是预期的行为。
当我将第一个和第二个子元素都设置为绝对定位时，第三个子元素会向上移动并位于第一个和第二个子元素的后面。这也是预期的行为。
但是，当我将所有子元素都设置为绝对定位时，子元素会完全移出父元素。为什么以及如何纠正这个问题？
这里是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
.parent {
position: absolute;
top: 30px;
right: 30px;
border: 1px solid blue;
}
.child.line1 {
position: absolute;
height: 10px;
width: 10px;
background-color: red;
}
.child.line2 {
position: absolute;
height: 10px;
width: 10px;
background-color: lightblue;
}
.child.line3 {
position: absolute;
height: 10px;
width: 10px;
background-color: green;
}
</style>
</head>
<body>
<div style="height: 100%; display: flex; align-items: center; justify-content: center;">
<div style="position: fixed; height: 200px; width: 200px; background-color: bisque;">
<div class="parent">
<div class="child line1"></div>
<div class="child line2"></div>
<div class="child line3"></div>
</div>
</div>
</div>
</body>
</html>
英文:
I have a parent element that is absolutely positioned, and three children.
When I make the first child to be positioned absolutely, the second child moves up and behind the first. This is expected.
When I make the first and second child to be positioned absolutely, the third child moves up and behind the first and second children. This is expected.
But when I make all the children to be positioned absolutely, the children move out of the parent completely. Why and how to rectify this?
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
.parent {
position: absolute;
top: 30px;
right: 30px;
border: 1px solid blue;
}
.child.line1 {
position: absolute;
height: 10px;
width: 10px;
background-color: red;
}
.child.line2 {
position: absolute;
height: 10px;
width: 10px;
background-color: lightblue;
}
.child.line3 {
position: absolute;
height: 10px;
width: 10px;
background-color: green;
}
</style>
</head>
<body>
<div style="height: 100%; display: flex; align-items: center; justify-content: center;">
<div style="position: fixed; height: 200px; width: 200px; background-color: bisque;">
<div class="parent">
<div class="child line1"></div>
<div class="child line2"></div>
<div class="child line3"></div>
</div>
</div>
</div>
</body>
</html>
答案1
得分: 1
不，即使所有子元素都具有绝对定位，它们仍然位于父元素内部。
问题出在你的父元素上。
.parent {
position: absolute;
top: 30px;
right: 30px;
border: 1px solid blue;
}
你没有设置父元素的宽度和高度，所以当你将所有子元素都设置为绝对定位时，父元素的宽度和高度都为0。
"外部"的小蓝色正方形实际上是父元素的边框。
如果你给.parent添加以下样式，一切都会看起来像你预期的那样：
.parent {
position: absolute;
top: 30px;
right: 30px;
border: 1px solid blue;
width: 10px;
height: 10px;
box-sizing: content-box;
}
这里是CodePen链接：https://codepen.io/milanh212/pen/YzRbWQz
P.S. 你应该始终为绝对/固定定位的元素设置top/bottom和left/right，以确保它们在任何浏览器和任何设备上都会位于你希望的位置。
在你的情况下，你应该添加：
.child {
top: 0;
left: 0;
}
英文:
No, children are inside parent element even when they all have position absolute.
Problem is with your parent element.
.parent {
position: absolute;
top: 30px;
right: 30px;
border: 1px solid blue;
}
You didn't set width and height of parent element, so when you set all children to absolute position, parent element's with and height is 0.
Litlle blue square which is "outside" of the parent is just parent's border.
If you add width: 10px;, height: 10px; and box-sizing: content-box; to the .parent everything would look like you expected.
Here is codepan: https://codepen.io/milanh212/pen/YzRbWQz
P.S. You should always set top/bottom and left/right to absolute/fixed positioned elements to be sure that they will be where you want them always in every browser and any device.
In your case, you should add:
.child {
top: 0;
left: 0;
}
答案2
得分: 1
首先，您需要将父元素的高度和宽度设置为盒子的尺寸，内部的盒子应该从顶部开始定位，然后它们将依次排列。
以下是代码部分的翻译：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
.parent {
position: absolute;
top: 30px;
right: 30px;
border: 1px solid blue;
/* 首先，您需要在父元素中添加高度和宽度 */
height: 32px; /* 添加高度 30px + 1px（上边框）+ 1px（下边框） */
width: 12px; /* 添加宽度 10px + 1px（左边框）+ 1px（右边框） */
}
.child.line1 {
position: absolute;
height: 10px;
width: 10px;
background-color: red;
top: 0px; /* 从顶部开始定位 */
}
.child.line2 {
position: absolute;
height: 10px;
width: 10px;
background-color: lightblue;
top: 10px; /* 从顶部向下移动 10px */
}
.child.line3 {
position: absolute;
height: 10px;
width: 10px;
background-color: green;
top: 20px; /* 从顶部向下移动 20px */
}
希望对您有帮助。
英文:
First, you have to set the height and width of the parent to the size of the box, and the inner box should be dimensioned from the top, then it will come in line after line.
The code is written below, please check it. Hope it will work for you.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
.parent {
position: absolute;
top: 30px;
right: 30px;
border: 1px solid blue;
/* First you need to add height & width in your parent div */
height: 32px; /* add height 30px + 1px (border-top) + 1px (border-bottom) */
width: 12px; /* add width 10px + 1px (border-left) + 1px (border-right) */
}
.child.line1 {
position: absolute;
height: 10px;
width: 10px;
background-color: red;
top: 0px; /* mention top side */
}
.child.line2 {
position: absolute;
height: 10px;
width: 10px;
background-color: lightblue;
top: 10px; /* To move 10px down from the top side */
}
.child.line3 {
position: absolute;
height: 10px;
width: 10px;
background-color: green;
top: 20px; /* To move 20px down from the top side */
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 100%; display: flex; align-items: center; justify-content: center;">
<div style="position: fixed; height: 200px; width: 200px; background-color: bisque;">
<div class="parent">
<div class="child line1"></div>
<div class="child line2"></div>
<div class="child line3"></div>
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论