it-swarm.com.ru

CSS относительный + правый (или нижний) почти НИКОГДА не работает

Я давно пишу CSS.

Я заметил что

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

никогда не работает!

относительное расположение будет работать с указанием левого и верхнего, но не с правым/нижним. Зачем?

Быстрое решение проблемы заключается в использовании «абсолютного» вместо этого и указании правого/нижнего в пикселях, но мне нужна причина.

Кроме того, поправьте меня, если я ошибаюсь. Независимо от того, позиционируется ли внешний контейнер абсолютно или относительно, не имеет ли смысла позиционировать что-либо «относительно» границ этого контейнера, или элементы внутри контейнера всегда должны быть расположены «абсолютно»?

Спасибо.

14
Akshay Sharma

От Абсолют против и Относительно - Объясняя CSS Позиционирование

Относительное позиционирование использует те же четыре свойства позиционирования, что и абсолютное позиционирование. Но вместо того, чтобы основывать позицию элемента на порте просмотра браузера, он начинается с того места, где он был бы, если бы он все еще находился в нормальном потоке .
14
oomlaut

Относительное позиционирование работает с нижними/правыми значениями, но не так, как вы ожидали:

http://cssdesk.com/RX24j

Думайте о значениях положения относительных элементов как о полях, которые окружающие элементы просто игнорируют. «Поля» всегда перемещают элемент относительно его предыдущей позиции в нормальном потоке документов, но в то же время удаляют его из нормального потока.

Вне нормального потока документов окружающие элементы действуют так, как если бы они находились в исходном положении в нормальном потоке ... но это не так. Вот почему относительный элемент может перекрывать свой родительский элемент (как в Rel 1).

8
user2313440

Ты пробовал это?

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

или скорее

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