Абсолютное позиционирование

Ответы на вопросы

1. Объясните, как браузер выполняет вёрстку блоков потоком.

   Ответ. Блоки выводятся прямоугольниками сверху вниз, занимая всю доступную ширину родителя вместе с границами и всеми своими отступами. Высота блока определяется по содержимому.

2. Что происходит с блочным элементом, если для него задано абсолютное позиционирование?

   Ответ. Блок изымается из потока (располагается выше), сохраняя прежние координаты верхнего левого угла (для языков с написанием справа налево сохраняются координаты правого верхнего угла). Блоки в потоке, занимают освободившееся место. Горизонтальный размер абсолютно позиционированного блока перестаёт подстраиваться под ширину родителя, и устанавливается по содержимому.

3. Что происходит со строчным элементом, если для него задано абсолютное позиционирование?

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

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

   Ответ. Абсолютно позиционированный блок можно поместить в любое место, задавая смещения при помощи свойств: left, top, right, bottom.

   Смещения left, top, right и bottom для абсолютно позиционированного блока отсчитываются от сторон прямоугольника, проведённого по внешней границе внутреннего отступа первого позиционированного предка (или HTML, если другие позиционированные предки отсутствуют).

   Смещения распространяются до внешних краёв внешних отступов смещаемого блока. То есть у блока смещается всё: внешние отступы, рамка, внутренние отступы и содержимое.

   

5. Какие значения могут принимать свойства, задающие смещения позиционированного блока? Какие значения имеют свойства по умолчанию? Передаются ли значения по наследству?

   Ответ. Свойства left, top, right и bottom могут принимать значения в любых единицах размера, в процентах или задаваться ключевым словом auto.

   Проценты задаются относительно высоты блока-контейнера для top и bottom и ширины блока-контейнера для right и left.

   Блоком-контейнером считается ближайший предок, значение position которого отлично от stаtic, а если таких предков нет, то элемент HTML.

   Значения auto для всех смещений, кроме bottom означают такие величины, какие были бы у элемента, если бы он находился в потоке. Тот же эффект возникает, когда смещение не задаётся вовсе.

   По умолчанию свойства принимают значение auto, по наследству не передаются.

6. Какое положение займёт абсолютно позиционированный блок, если смещения явно не заданы? Если задано только одно смещение?

   Ответ. Если смещения не заданы, абсолютно позиционированный блок сохраняет координаты верхнего левого угла, которые он имел бы в потоке (для языков с написанием справа налево сохраняются координаты правого верхнего угла).

   Если задать только одно смещение (например, left), второе (top) сохранит то значение, которое имелось бы у блока в потоке.

7. Можно ли задавать противоположные смещения, например, left и right для позиционированного блока? Как это работает, и во всех ли браузерах это работает?

   Ответ. Если задать противоположные смещения, то это повлияет на размеры позиционированного блока — размеры будут подстраиваться под заданные смещения. Пусть, например, задано определение:

   #block
   {
     position:absolute;
     left:0;
     right:0;
   }
             

   Так как задано нулевое расстояние блока от левого и правого края, он вынужден растягиваться, занимая всю ширину блока-контейнера (вместе с границей и всеми своими отступами).

   К сожалению, одновременное указание противоположных смещений не работает в браузере IE (он выполняет left:0, но игнорирует right:0).

вверх | возврат