gpt4 book ai didi

css position relative 区别于 absolute

转载 作者:太空宇宙 更新时间:2023-11-03 23:22:27 26 4
gpt4 key购买 nike

我在使用相对位置时遇到了麻烦。 css 中的以下代码:

#background
{
background-color: gray;
position: absolute;
left: 100px;
top: 100px;
width: 500px;
height: 500px;
}

#p1
{
position: relative;
left: 100px;
top: 100px;
width: 10px;
height: 10px;
background-color: green;
}

在我看来,background 和 p1 的左上角应该是偶数。但事实并非如此。我会说它被推到右边和底部大约 +50px。这个问题怎么来的,怎么解决?

最佳答案

position:absolute意味着它是基于祖先的左上角定位的,祖先是具有位置规范的父代,或者是 <body>。元素本身,如果没有的话。然而,position:relative意味着它的定位是基于它通常在没有被重新定位的情况下所处的位置(即,正常位置 + 偏移量)。如果您的代码是这样的:

<div id="background"><div id="p1">...</div></div>

那就意味着background应该位于左上角(加上偏移量),但是 p1应该在其父项 background 的右下方 100 像素处.

编辑:修复了关于两个位置的定义。

关于css position relative 区别于 absolute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28225019/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com