CSS相对+右（或底部）几乎从不工作 [英] CSS relative + right (or bottom) almost NEVER work

问题描述

我已经写了一段时间了。

I've been writing CSS for quite some time now.

我注意到了

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

从不工作！

使用左和顶指定，但不与右/底。 为什么？

relative positioning would work with left and top specified but not with right/bottom. Why?

快速解决这个问题的方法是改用absolute，并以像素为单位指定right / bottom，

A quick fix around this is to use "absolute" instead and specify right/bottom in pixels, but I need a reason.

此外，如果我错了，请纠正我。不管外部容器是绝对定位还是相对定位，将相对定位于该容器的边界没有多大意义，或者容器内部的元素总是被定位为绝对？

Also, correct me if I'm wrong. Irrespective of whether the external container is positioned absolutely or relatively, does it not make much sense to position something "relative" to the boundaries of that container or should elements inside a container always be positioned "absolute"?

谢谢。

推荐答案

从绝对与相对 - 解释CSS定位

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

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.

这篇关于CSS相对+右（或底部）几乎从不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！