绝对定位[英] Absolute positioning

问题描述

我正在尝试了解定位的基础知识,并且我在互联网上遇到了这个显示特定属性的示例.本质上,他们用 CSS 创建了两个框:

#box_1 { 
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 { 
position: absolute;
left: 100px;
width: 200px;
height: 200px;
background: #44accf;
}

因为绝对定位将容器放置在与其第一个父元素相关的位置,所以不应该将第二个框放置在浏览器的顶部,然后离开 100 像素吗?有了这个绝对定位的定义,两个框不应该重叠吗?相反,第二个框最终位于第一个框下方.我认为绝对定位会从页面的正常流程中删除一个对象?任何人都可以向我解释这一点吗?

这就是我要说的:http://jsfiddle.net/WScGM/

推荐答案

W3C 说:

<块引用>

绝对定位的盒子脱离了正常的流程.

<块引用>

框的位置 ... 由 'top'、'right'、'bottom' 和 'left' 属性指定

在您的示例中,您尚未定义"顶部"或"底部"(垂直位置)的值.top/left/right/bottom 的初始值是"auto".所以我相信这就是元素保持垂直位置的原因.实际计算的样式如下所示:

position:absolute;
left:100px;
right:auto;
top:auto;
bottom:auto;

这意味着它的行为就像在正常流中一样,但它更正确 100 像素.但是如果你在文档中放了第三个没有绝对定位的框,绝对的就会重叠起来.

要将其放置在距左上边缘 100 像素的位置,请添加

top:0;

到你的 CSS.

其他推荐答案

绝对定位是一种非常强大的定位类型,它允许您将任何页面元素准确地放置在您想要的位置.

您可以使用定位属性top, left bottom, right 来设置位置.请记住,这些值将相对于具有相对(或绝对)定位的下一个父元素.

如果没有这样的父元素,它将默认一直返回到元素本身,这意味着它将相对于页面本身放置.

关于绝对定位的权衡是要记住的最重要的事情是这些元素从页面上的元素流中删除.

具有这种类型定位的元素不受其他元素的影响,也不会影响其他元素.每次使用绝对定位时,这都是需要认真考虑的事情.

现在你的问题来了:第二个框不应该放在浏览器的顶部,然后离开100像素吗? 有了这个绝对定位的定义,不应该两个框重叠?

当然,根据绝对定位的定义,如果两个框都处于绝对定位,则两个框应该重叠.

这是因为默认情况下其中之一处于静态定位.

现在我在 absolute 位置做了如下:

#box_1 { 
    width: 200px;
    height: 200px;
    background: #ee3e64;
    position:absolute;
}
#box_2 { 
    position: absolute;
    left: 100px;
    width: 200px;
    height: 200px;
    background: #44accf;
}

所以,现在它们重叠了.见这里:

小提琴

其他推荐答案

您需要为第二个框添加"top:0"以进行重叠.

本文地址:https://www.itbaoku.cn/post/1050588.html