Свободное перемещение: детали

Прежде чем углубиться в детали перемещения, важно определить концепцию блока-контейнера (containing block). Блок-контейнер перемещаемого элемента – это ближайший блочный элемент-предок. Следовательно, в данной разметке блоком-контейнером перемещаемого элемента является содержащий его абзац:

Тест



Это текст абзаца, о чем вы знаете и так. В состав содержимого данного абзаца входит изображение, которое было перемещено.
Блок-контейнер для перемещаемого изображения – данный абзац.



К понятию блока-контейнера мы вернемся при обсуждении позиционирования далее в этой главе. Более того, перемещаемый элемент независимо от своего типа генерирует блочный элемент. Таким образом, если перемещается ссылка, пусть даже элемент является строковым и обычно генерирует строковый блок, при перемещении он генерирует блочный элемент. Он будет компоноваться и действовать так, как если бы был элементом div, например. Точно так же действует объявление display: block для перемещаемого элемента. Размещением перемещаемых элементов управляет ряд специальных правил, так что давайте рассмотрим их, перед тем как перейдем к прикладному поведению.


Эти правила похожи на те, которые регулируют вычисление полей и ширины, и тоже не лишены здравого смысла. Вот они:

1. Левый (или правый) внешний край перемещаемого элемента не может располагаться левее (или правее) внутреннего края его блокаконтейнера. Это довольно просто. Внешний левый край перемещаемого влево элемента может располагаться не левее внутреннего левого края блока-контейнера; аналогично перемещаемый вправо элемент не может располагаться правее внутреннего правого края его блока-контейнера. (На этом и последующих рисунках цифры в кружочках показывают месторасположение элемента согласно источнику, а пронумерованные блоки указывают на местоположение и размер перемещаемого видимого элемента.)

2. Левый (или правый) внешний край перемещаемого элемента должен быть не правее (не левее) правого (левого) внешнего края перемещаемого влево (или вправо) элемента, встречающегося в исходном файле документа раньше, если только верх второго элемента не находится под низом первого. Это правило предупреждает наложение перемещаемых элементов. Если элемент перемещается влево, а там уже находится другой перемещаемый элемент, то второй элемент будет помещен сразу за внешним правым краем ранее перемещенного элемента.


Однако если перемещаемый элемент находится ниже всех ранее перемещенных изображений, он может расположиться у внутреннего левого края родителя. Преимущество этого правила в том, что все перемещаемое содержимое будет видимым, поскольку ни один из перемещаемых элементов не скроет другой. Это делает перемещение совершенно безопасным. В случае позиционирования ситуация совершенно другая: можно запросто получить перекрытие элементов.

3. Правый внешний край перемещаемого влево элемента не может располагаться правее левого внешнего края любого перемещаемого вправо элемента. Левый внешний край перемещаемого вправо элемента не может находиться левее правого внешнего края любого перемещаемого влево элемента. Это правило предупреждает наложение перемещаемых элементов. Скажем, у вас есть элемент body шириной 500 пикселов, и все его содержимое составляют два изображения шириной 300 пикселов. Первое перемещается влево, а второе – вправо. Это правило предупреждает перекрытие первого изображения вторым на 100 пикселов. Вместо этого изображение опускается вниз до тех пор, пока его верх не окажется под низом перемещаемого вправо изображения.

4. Верх перемещаемого элемента не может быть выше внутреннего верхнего края его родителя.


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

5. Верх перемещаемого элемента не может быть выше верха любого ранее перемещенного элемента или блочного элемента. Аналогично правилу 4 правило 5 предупреждает появление перемещаемых элементов в самом верху их родительских элементов. Так-же верх перемещаемого элемента не может быть выше верха перемещаемого элемента, появившегося раньше. 6. Верх перемещаемого элемента не может располагаться выше верха любого контейнера строки, содержащего блок, который сгенерирован элементом, находящимся в исходном файле документа раньше. Аналогично правилам 4 и 5 это правило еще более ограничивает перемещение элемента вверх, предотвращая его размещение выше верха строки, включающей содержимое, предшествующее перемещаемому элементу.


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

7. Правый внешний край перемещаемого влево (или вправо) элемента, слева (справа) от которого находится другой перемещаемый элемент, не может быть правее (левее) правого (левого) края его блокаконтейнера. Иначе говоря, перемещаемый элемент не может выступать за край своего элемента-контейнера, если только он не занимает всю его ширину. Благодаря этому удается избежать выстраивания перемещаемых элементов в одну линию и предотвратить их выход за края блока-контейнера – перемещаемый элемент размещается ниже предыдущих перемещаемых элементов (на рисунке перемещаемые элементы располагаются на следующей строке, что яснее иллюстрирует применяемый здесь принцип). Это правило впервые появилось в CSS2.

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


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

9. Перемещаемый влево элемент должен смещаться влево на максимально возможное расстояние, а элемент, перемещаемый вправо, – на максимально возможное расстояние вправо. Выше размещается тот элемент, который располагается правее или левее. Опять же это правило подчиняется ограничениям предыдущих правил. Пояснения аналогичны представленным в правиле 8, хотя они не настолько туманны. Когда элемент смещается на максимально возможное расстояние влево или вправо.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет на обтекание