Question

我已经写了很长一段时间了。

我注意到了

<div style="position: relative; right: 20%; bottom: 20%;">some text</div>

永远不会有效！

相对定位适用于指定的左侧和顶部，但不适用于右侧/底部。 为什么？

快速解决此问题的方法是使用“绝对”而指定右/底（以像素为单位），但我需要一个理由。

另外，如果我错了，请纠正我。无论外部容器是绝对放置还是相对放置，将容器的“相对”定位到容器的边界或者容器内的元件是否总是“绝对”定位没有多大意义？

谢谢。

Answer 1

来自Absolute vs. Relative - Explaining CSS Positioning

相对定位使用与绝对定位相同的四个定位属性。但是，不是将元素的位置基于浏览器视图端口，而是在元素仍处于正常流程中时从元素的位置开始。

Answer 2

相对定位确实适用于底部/右侧值，而不是您期望的方式：

http://cssdesk.com/RX24j

将相对元素的位置值视为边距，周围元素只是忽略。 “边距”将始终相对于正常文档流中的先前位置移动元素，但同时将其从正常流中移除。

当超出正常文档流程时，周围的元素就像它在正常流程中的原始位置一样......但事实并非如此。这就是相对元素可以与其父元素重叠的原因（如在Rel 1中）。

Answer 3

你试过这个吗？

<div style="position: relative; right: -20%; bottom: -20%;">some text</div>

或者更确切地说

<div style="position: relative; right: -80%; bottom: -80%;">some text</div>

Answer 4

不推荐：

left : 0%   //will set it to left 
left : 100% //will set it to right => you need to get the width of the element and subtract it using calc ( 100% - width)

Answer 5

从父元素中删除位置左，右，上，下并根据需要将其放入孩子中

.parent_class
{
    background: #ff0000 ;
    position: absolute;
    transition: 0.8s ease-out;
    left:0;   //" remove this from here"
    top:0;   // " remove this from here"
    z-index: -1;
}

.child_class
{   
    width: 0px;
    height: 70px;
    right: 0; //"now it will work"
    bottom: 0;//"now it will work"
}

CSS相对+右（或底部）几乎从不工作

5 个答案: