CSS 相对+右（或底部）几乎永远不会工作

Question

我编写 CSS 已经有一段时间了。

我注意到了

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

永远不起作用！

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

解决此问题的一个快速解决方法是使用“绝对”，并以像素为单位指定右侧/底部，但我需要一个原因。

另外，如果我错了，请纠正我。无论外部容器是绝对定位还是相对定位，将某些内容“相对”定位到该容器的边界是否没有多大意义，或者容器内的元素应该始终“绝对”定位吗？

谢谢你。

Answer 1

来自 绝对与相对 - 解释 CSS 定位

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

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

对于访问这篇旧帖子的人们... 如果您尝试放置在其他元素内部的元素的宽度或高度大于外部元素。位置将忽略左、右、下、左。

自动指定宽度/高度。

这就是我遇到的问题。希望对你也有帮助！

Answer 6

从父元素中删除左、右、上、下位置 然后按照你想要的方式把它放在孩子身上

.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"
}

Answer 7

left

属性的默认值是多少？是0，对吧？您的解决方案不起作用，因为

left: 0

正在干扰。 添加

left: auto

到你的CSS。