Html 为什么'；绝对位置的div不是从顶部开始的吗？_Html_Css

Html 为什么'；绝对位置的div不是从顶部开始的吗？

html css

Html 为什么'；绝对位置的div不是从顶部开始的吗？,html,css,Html,Css,以中的html和css为例页面中的#box2已被定位为绝对位置，左偏移量为200px，因此向右移动200 px。但是，顶部偏移也会以某种方式设置为200px，但是如果我正确理解绝对定位，它应该相对于其父对象（在本例中为主体）进行定位，因此它应该具有顶部偏移0 你能解释一下为什么会发生这种情况吗？使用css.box可以将所有框1-3设置为位置：相对。您的css#框2在框2上设置了一个绝对位置。id（#box2）的css选择器比类选择器（.box）更具体，因此#box2中的定位：绝对推翻了.bo

以中的html和css为例

页面中的

#box2

已被定位为绝对位置，左偏移量为

200px

，因此向右移动200 px。但是，顶部偏移也会以某种方式设置为

200px

，但是如果我正确理解绝对定位，它应该相对于其父对象（在本例中为主体）进行定位，因此它应该具有顶部偏移

你能解释一下为什么会发生这种情况吗？

使用css

.box

可以将所有框1-3设置为

位置：相对

。您的css

#框2

在框2上设置了一个绝对位置。id（

#box2

）的css选择器比类选择器（

.box

）更具体，因此

#box2

中的

定位：绝对

推翻了

.box

中的

定位：相对

您没有在css中为

#box2

定义顶级属性/值。这意味着它将与除左位置之外的其他标记一起流动

由于

div

显示为

block

，因此它将显示在

框1的正下方。因为你的cssleft:200px，它将从左边画200px
尝试将#box2
的css更改为类似的内容
#box_2 { background: #44accf; left: 150px; top: 100px; position: absolute; }

并使用左侧和顶部的值来了解绝对定位在做什么。
使用css.box
可以将所有框1-3设置为位置：相对。
您的css#框2
在框2上设置了一个绝对位置。id（#box2
）的css选择器比类选择器（.box
）更具体，因此#box2
中的定位：绝对
推翻了.box
中的定位：相对

您没有在css中为#box2
定义顶级属性/值。这意味着它将与除左位置之外的其他标记一起流动
由于div
显示为block
，因此它将显示在框1的正下方。因为你的cssleft:200px，它将从左边画200px
尝试将#box2
的css更改为类似的内容
#box_2 { background: #44accf; left: 150px; top: 100px; position: absolute; }

然后用左边和上面的值来理解绝对位置在做什么。
你没有给它一个top:
值-所以它把自己放在相对位置/默认位置的位置（正如BoltClock所说，这被称为静态位置
）
在本节和下一节中，术语“静态
“位置”（元素的）大致指元素的位置
在正常流量下会有
更准确地说，是静态位置
对于“top”，是从包含块的上边缘到
假设框的上边缘，该框将是
如果指定的“位置”值已更改，则为元素的第一个框
“static”及其指定的“float”已为“none”且已指定
“clear”是“none”
~

以下是一个基本示例：

html，
身体{
保证金：0；
填充：0；
}
.盒子{
位置：相对位置；
宽度：200px；
高度：200px；
}
#方框1{
背景：#ee3e64；
}
#方框2{
背景：#44accf；
左：200px；
位置：绝对位置；
排名：0；
}
#方框3{
背景#b7d84b；
}
您没有给它一个顶部：
值-因此，如果它处于相对位置/默认位置，它会将自身放置在原来的位置（正如BoltClock所说，这称为静态位置
）
在本节和下一节中，术语“静态
“位置”（元素的）大致指元素的位置
在正常流量下会有
更准确地说，是静态位置
对于“top”，是从包含块的上边缘到
假设框的上边缘，该框将是
如果指定的“位置”值已更改，则为元素的第一个框
“static”及其指定的“float”已为“none”且已指定
“clear”是“none”
~

以下是一个基本示例：

html，
身体{
保证金：0；
填充：0；
}
.盒子{
位置：相对位置；
宽度：200px；
高度：200px；
}
#方框1{
背景：#ee3e64；
}
#方框2{
背景：#44accf；
左：200px；
位置：绝对位置；
排名：0；
}
#方框3{
背景#b7d84b；
}

您没有给它一个top:value，所以如果它处于相对位置/默认位置，它会将自己放置在原来的位置。如果您尝试添加第四个框#box_4{background:#ff0000；position:absolute；}
，您将看到它将位于相对框（#3）的下方。如果没有设置top，它会尝试使用它以前的非绝对同级上下文来确定位置。@jbutler483:为什么不将其作为一个答案发布？@BoltClock:不确定我是否解释得足够好，但无论如何都尝试过了。您没有给它一个top:值-因此，如果它是相对位置/默认位置，它会将自己放置在原来的位置。如果您尝试添加第四个框#box_4{background:#ff0000；position:absolute；}
，您将看到它将位于相对框（#3）的下方。如果top没有设置，它会尝试使用它以前的非绝对兄弟上下文来确定位置。@jbutler483:为什么不将其作为一个答案发布？@BoltClock:不确定我是否解释得足够好，但无论如何我都试过了。我不理解第一句话，你想说第一句话中的内容吗？这听起来令人困惑、重复或对答案没有帮助。听起来就像it@bart我不明白。。。绝对定位将从文档流中删除元素，并将相对于其父元素进行定位。。。但你似乎是说它考虑了框1
的位置