CSS的相对性+右侧（或底部）几乎永远不会起作用[英] CSS relative + right (or bottom) almost NEVER work

问题描述

我已经写了一段时间了.

我注意到

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

永不工作！

相对定位将用于左和顶部指定，但不能与右/底部一起使用. 为什么?

围绕此的快速解决方法是使用"绝对"并在像素中指定正确/底部，但是我需要一个原因.

另外，如果我错了，请纠正我.不管外部容器是绝对还是相对放置，将"相对"的某些东西定位到该容器的边界或应该始终将元素定位在容器中始终定位为"绝对"?

谢谢.

推荐答案

来自绝对与亲戚 - 解释CSS定位

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

其他推荐答案

相对定位确实与底部/正确的值一起工作，只是您期望的方式:

http://cssdesk.com/rx24j

将相对元素上的位置值视为边缘，周围元素根本忽略了. "边距"将始终将元素相对于正常文档流中的先前位置移动，但同时将其从正常流中删除.

从正常文档流出时，周围的元素就像在正常流动中的原始位置一样……但事实并非如此.这就是为什么相对元素可以重叠其父的原因(例如在rel 1中).

其他推荐答案

您是否尝试过?

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

或更确切地说

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

本文地址：https://www.itbaoku.cn/post/583367.html