CSS relative + right (или bottom) почти НИКОГДА не работает

Я писал CSS уже довольно давно.CSS relative + right (или bottom) почти НИКОГДА не работает

Я заметил, что

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

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

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

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

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

спасибо.

источник

2013-04-30 Akshay Sharma

Когда вы говорите, что эта функция «не работает», что именно вы имеете в виду? Для этого существует много разных значений. Чтобы помочь понять проблему у других пользователей, попробуйте добавить код или [jsFiddle] (http://jsfiddle.net), чтобы помочь. –

Absolute vs. Relative - Explaining CSS Positioning От

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

источник

2013-04-30 02:03:51 oomlaut

Правильно: 40px; в значительной степени то же самое, что и margin-left: -40px; в таком случае? Это просто странно ... –

Разница там, @TomAuger - это свойство 'position', которое должно быть назначено элементу _parent_, чтобы повлиять на это изменение. Подумайте об этом в терминах ** push ** vs ** pull **: 'right: 40px;' будет означать, что родитель элемента должен был бы «position: relative», и элемент был бы ** нажат ** 40 px на слева от нормального правого ограничивающего края. Однако, если модель коробки обрушится, это может не дать предполагаемый показ отображения. Вместо 'margin-left: -40px;' ** тянет ** элемент из левого ограничивающего края, а родительский элемент может сохранить свое свойство 'position: static;' по умолчанию. – oomlaut

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

http://cssdesk.com/RX24j

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

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

источник

2013-04-30 02:34:38 user2313440

Вы попробовали?

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

или скорее

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

источник

2015-06-02 23:12:59 SoEzPz

CSS relative + right (или bottom) почти НИКОГДА не работает

ответ

Смежные вопросы