gpt4 book ai didi

css - 为什么设置 `right` CSS 属性会将元素推向左侧?

转载 作者:行者123 更新时间:2023-12-02 01:17:10 32 4
gpt4 key购买 nike

我有一个非常基本的页面,包含两个元素,一个外部绿色框和一个内部蓝色框。我很困惑为什么在内盒上设置正确的属性会将它移到左边?此外,我很困惑为什么 right:0 不会将框的右边缘与父框的右边缘对齐?这是我的简短示例页面...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#outer {
background-color : green;
width : 500px;
height : 500px;
}

#inner {
position : relative;
background-color : blue;
height : 400px;
width : 400px;
top : 10px;
right : 20px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">


</div>

</div>
</body>
</html>

最佳答案

设置 right 属性指示您的元素应该离右边缘多远。将其视为设置新的原点。默认情况下,您的起点位于包含元素的左上角。您可以使用 bottomright 来更改它。

当你的元素是相对定位时,它的右原点将是它右边缘的自然位置。这就是您的元素向左移动 20px 的原因。如果您将位置值更改为 absolute,新的原点将是最近定位容器的右边缘,或视口(viewport)本身。在您的例子中,它是视口(viewport)。

有关更多信息,请参阅 http://www.w3.org/wiki/CSS/Properties/right

关于css - 为什么设置 `right` CSS 属性会将元素推向左侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10082567/

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