设置相对定位div的权限不起作用

Question

我认为左，右，顶部，底部适用于绝对和相对定位的物体，但是当我尝试相对定位在div上时，突然间，它不再起作用了。我做错了什么？

#outer {
border: 1px solid red;
width: 50%;
height: 50%;
}
#inner {
border: 1px solid blue;
display: inline-block;
position: relative;
right: 0;
}

<div id = 'outer'>
<div id = 'inner'> Hello World! </div>
</div>

Answer 1

您希望#outer为position: relative而#inner为position: absolute。

添加更多细节： 看http://www.w3schools.com/cssref/pr_class_position.asp

relative =元素相对于其正常位置定位，因此“left：20”将20个像素添加到元素的LEFT位置

在right: 0 position: relative与#inner上合并#inner的情况下，您没有做任何事情，因为您告诉布局引擎移动 db.run( countries.take(5) .map(_.country) .result ) ，使其右边界与其正常边界为0位置。

Answer 2

首先，您的height:50%和width:50%无效。要使它们起作用，它们的父容器必须具有预定义的高度或宽度，或者元素本身必须定位absolute。如果它位于absolute，则该元素的高度和宽度将等于下一个更高父元素的高度和宽度的50％，该元素位于absolute或{{1 }} ;如果没有这样的元素，它的高度和宽度将是视口的50％。

就relative属性而言，让我用一个div定位相对的例子来解释它，并且在它上面有一个属性position:relative。单词relative在这里表示相对于div的原始位置，即如果没有为其指定位置属性，则为其位置。正确的属性将元素从右侧移动，20px向左移动。它不会向右移动。当然，正如我之前所说，这种转变与其原始位置有关。

另外，我错误地指定了两个位置特性。知道在这种情况下，稍后指定的属性是重要的属性。这称为覆盖之前定义的属性。

＆＃13;

＆＃13;

right:20px

＆＃13;

#outer {
border: 1px solid red;
height:50%;
width:50%;
position:absolute;
}
#inner {
border: 1px solid blue;
display: inline-block;
position: relative;
right : 50px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

@agdhruv "要知道，在这种情况下，稍后指定的属性才是最重要的。这称为覆盖之前定义的属性。"

我的测试和来自网络 (https://developer.mozilla.org/en-US/docs/Web/CSS/right) 的信息表明，对于左右属性，此声明并不总是正确的。

引自 Mozilla 网站 (MDN)：

<块引用>

当 left 和 right 都被定义时，如果没有其他属性阻止这样做，元素将拉伸以满足两者。如果元素不能拉伸以满足两者——例如，如果声明了宽度——元素的位置被过度约束。在这种情况下，当容器从左到右时，左值优先；当容器从右到左时，正确的值优先。