| Позиционирование |
| 1 | Поток документа. Порядок отображения элементов на странице называется потоком документа. Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку. Элементы можно вкладывать друг в друга. Чем раньше в коде расположен элемент, тем выше он расположен на странице. Некоторые типы элементов могут вести себя в потоке более сложно. Например, они могут располагаться в несколько колонок, как блочно-строчные элементы. Любой элемент, который находится в потоке, занимает на странице свою собственную площадь и, если надо, отталкивает от себя соседей с помощью маргинов. |
| 2 | Относительное позиционирование. Свойство position задает режим позиционирования элементов. Значением по умолчанию является static, которое означает «обычное позиционирование». Значение relative обозначает «относительное позиционирование». Относительно спозиционированный элемент можно перемещать относительно его исходного положения. Относительно спозиционированный элемент остается в потоке документа, а при его перемещении наблюдаются интересные эффекты. |
| 3 | position:relative + top, left, bottom, right. Свойство top позволяет сместить относительно спозиционированный элемент вверх или вниз относительно его исходного положения. Значение этого свойства обычно задается в пикселях, но можно использовать и другие единицы измерения КСС. Вы заметили, что когда мы сместили блок вниз, нижележащие блоки не сдвинулись? Это происходит потому, что относительно спозиционированный элемент на самом деле никуда не смещается. Он остаётся в потоке ровно там же, где и был. А смещается иллюзорная копия блока. Свойство left позволяет сместить блок влево или вправо относительно исходного положения. Свойство bottom аналогично свойству top, а right аналогично left, только смещает элемент в другом направлении. Положительное значения свойства bottom сместит элемент вверх, а отрицательное вниз. Относительно спозиционированный элемент можно смещать по горизонтали и по вертикали, комбинируя свойства top/bottom со свойствами left/right. |
| 4 | В реальных проектах относительное позиционирование может использоваться для создания декоративных эффектов, хотя область его применения намного шире. |
| 5 | Абсолютное позиционирование. Значение absolute свойства position задаёт элементу абсолютное позиционирование. Абсолютно спозиционированные элементы обладают следующими особенностями: 1.Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы. 2.Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину). 3.Остаются на том же месте, где были, если не заданы значения свойств top, left, right, bottom. |
| 6 | Абсолютное позиционирование и строчные элементы. Абсолютное позиционирование изменяет поведение не только блочных элементов (ширина по умолчанию), но и строчных. Если строчный элемент спозиционирован абсолютно, то он ведет себя точно так же, как и абсолютно спозиционированный блочный. Например, такому строчному элементу можно задавать размеры с помощью width и height. Можно сказать, что есть еще один тип элементов — абсолютно спозиционированные. Такими становятся элементы всех остальных типов (блочные, строчные, блочно-строчные и т.д.), если им задано свойство position:absolute;. |
| 7 | position: absolute and left. Свойства left, top, right, bottom по-разному работают для элементов с абсолютным и относительным позиционированием. Если для «относительных» элементов эти свойства задают смещение относительно исходной позиции, то для «абсолютных» элементов они задают расположение относительно некой системы координат, как для точки на графике. По умолчанию такой системой координат является окно браузера, а точки начала координат привязаны к его углам. Свойство left задает отступ от левого края окна браузера до левого края абсолютно спозиционированного элемента. Если свойству задать отрицательное значение, то элемент сместится за левый край браузера (при этом полоса прокрутки не появится). |
| 8 | position: absolute and top. Свойство top задает отступ от верхнего края окна браузера до верхнего края абсолютно спозиционированного элемента. Таким образом, с помощью свойств left и top можно позиционировать «абсолютный» элемент относительно левого верхнего угла окна браузера. |
| 9 | position: absolute and right. Свойство right задает отступ от правого края окна браузера до правого края «абсолютного» элемента. Это свойство позволяет легко прижать элемент любой ширины к правому краю окна. Если задать отрицательное значение для right, то элемент сместится за край окна, но при этом появится полоса прокрутки. С помощью top + right можно позиционировать элементы от правого верхнего угла. |
| 10 | position: absolute and bottom. Свойство bottom задает отступ от нижнего края окна браузера до нижнего края «абсолютного» элемента. Отрицательное значение bottom затолкнет элемент за нижний край окна браузера и при этом появится полоса прокрутки. |
| 11 | Точка отсчета координат. По умолчанию «абсолютные» элементы позиционируются в системе координат, привязанной к окну браузера. Однако, систему координат можно изменить. Если какой-нибудь из родителей «абсолютного» элемента имеет относительное позиционирование, то элемент будет позиционироваться относительно этого родителя. Если среди родителей несколько относительно позиционированных элементов, то «абсолютный» элемент будет позиционироваться относительно ближайшего из них. Интересно, что позиционирование по умолчанию отличается от позиционирования внутри тэга body. |
| 12 | Неявная точка отсчета. Неявная точка отсчета — это то место, где находился элемент до того, как ему задали абсолютное позиционирование. Если «абсолютному» элементу не задавать свойства left ... bottom, то он выпадет из потока, но останется на прежнем месте. Такой элемент можно сместить из неявной точки отсчета с помощью свойства margin. Оно будет работать примерно так же, как и свойства left ... bottom для «относительного» элемента. Кстати, когда значение для left не задано, оно равно auto. То же верно и для оставшихся трёх свойств. С помощью значения auto можно возвращать «абсолютные» элементы на исходное положение. |
| 13 | Фиксированное позиционирование. Значение fixed свойства position задаёт элементу фиксированное позиционирование. Фиксированное позиционирование похоже на абсолютное, но есть и отличия: 1.Фиксированный элемент тоже выпадает из потока. 2.Фиксированный элемент привязывается к определенной точке в окне браузера и остается на ней всегда, даже при прокрутке страницы. 3.Фиксированный элемент можно позиционировать с помощью свойств top, left, right, bottom, но точка отсчета всегда привязана к окну браузера. Можете представить себе фиксированный элемент, как стикер, который наклеен на монитор. Такие элементы часто применяют для создания навигационных панелей, привязанных к верхней или нижней части окна браузера. |
| 14 | z-index или кто кого перекроет. Если в одном месте страницы оказываются несколько «абсолютных» блоков, то они перекрывают друг друга. По умолчанию выше оказывается тот блок, который расположен дальше в коде страницы. C помощью CSS-свойства z-index можно управлять тем, как перекрываются блоки. Значением этого свойства может быть целое число. Чем больше z-index, тем выше располагается блок. Свойство z-index работает для элементов, у которых position задано как absolute, fixed и relative. Таким образом, «относительный» элемент может перекрывать «абсолютный». |
Комментарии