为什么设置`right` CSS属性会将元素向左推? [英] Why does setting the `right` CSS attribute push an element to the left?
问题描述
我有一个非常基本的页面，其中包含两个元素，一个外部绿色框和一个内部蓝色框.我对为什么在内部框上设置right属性会将其向左移动感到困惑?此外，我对为什么right:0不能将框的右边缘与父框的右边缘对齐感到困惑?这是我的简短示例页面...
I have a very basic page with two elements, an outer green box, and inner blue box. I am confused as to why setting the right attribute on the inner box would move it to the left? Furthermore I am confused as to why right:0 would not align the boxes right edge to the right edge of the parent box? Here is my short example page...
<!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属性指示元素应距右边缘多远.可以将其视为设置新的起点.默认情况下，您的来源是包含元素的左上角.您可以使用bottom和right进行更改.
Setting the right property indicates how far from the right edge your element should be. Think of it as setting a new point of origin. By default, your origination is the top-left of the containing element. You can use bottom and right to change this.
当元素相对放置时，其右缘将是其右边缘的自然位置.这就是为什么您的元素向左移动20px.如果将位置值更改为absolute，则新的原点将是最近放置的容器的右边缘，或者是视口本身.在您的情况下，就是视口.
When your element is positioned relative, its right-origin will be the natural location of its right-edge. This is why your element is shifted to the left 20px. If you changed the position value to absolute, the new point of origin will be the right edge of the nearest positioned container, or the viewport itself. In your case, it's the viewport.
有关更多信息，请参见 http://www.w3.org/wiki/CSS/属性/右
For more, see http://www.w3.org/wiki/CSS/Properties/right
这篇关于为什么设置`right` CSS属性会将元素向左推?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
