英文:
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中添加width: 10px;、height: 10px;和box-sizing: content-box;，一切都会符合你的预期。
这是代码片段：https://codepen.io/milanh212/pen/YzRbWQz
附注：对于绝对/固定定位的元素，你应该始终设置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
首先，您需要将父元素的高度和宽度设置为盒子的尺寸，内部盒子应该从顶部开始定位，然后它们将按行排列。
以下是代码，请检查一下。希望对您有用。
<!-- 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;
/* 首先需要在父元素中添加高度和宽度 */
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 */
}
<!-- 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 -->
英文:
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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论