Как вы вероятно уже знаете верстать сайт можно, используя таблицы, в этом случае страница разбивается на ячейки. А можно для этих целей использовать блоки, когда страница сайта состоит из отдельных элементов.
Наверное, не ошибусь, если скажу, что при этом серьезной проблемой для многих начинающих веб-мастеров является задача расположить блоки в заданном месте веб-страницы.
Одной из главных трудностей при верстке с помощью блоков является позиционирование (выравнивание) этих самых блоков.
Немного о слоях (layers)
Думаю, многие из вас слышали о таком понятии, как слой (layer). И, как правило, под слоем понимается блок, заданный тегом
В HTML не существует слоев. Это просто метафора. Когда речь идет о слоях, то под ними понимается некий html контейнер (элемент), который может быть помещен в определенном месте веб-страницы.
Вторым заблуждением является отнесение к слоям только блока, заданного тегом
), списки (
- ) и другие элементы.
- top - вверх;
- left - лево;
- right - право;
- bottom - вниз.
- absolute – абсолютное;
- relative – относительное;
- fixed – фиксированное.
А теперь о ах.
Как уже говорилось выше, задать местоположение можно любому HTML элементу. Для этого нет нужды всегда использовать тег
. Также использование данного тега не обязывает вас задавать ему какое-либо положение на веб-странице.
Смысл применения блока, заданного тегом
сводится к укрупнению. Ведь внутрь его можно поместить другие элементы (параграфы, картинки, и тд.). Таким образом получается крупный блок, с разнообразным содержимым, который значительно легче позиционировать на веб-странице, нежели каждый из элементов в отдельности.
Позиционирование элементов.
Существует четыре основных типа позиционирования:
1. Статическое (Static)
2. Абсолютное (Absolute)
3. Фиксированное (Fixed)
4. Относительное (Relative
)
Статическое (Static)
Используется как расположение «по умолчанию». В этом случае браузер просматривает html код, разделяет его на элементы и составляет из них страницу. Получается последовательность из ряда элементов. Выводятся они в том порядке, в котором указаны в html коде.
Применение параметров left, top, right и bottom
не приводит к каким-либо результатам.
Необходимо помнить о статическом позиционировании, когда используется относительное расположение.
Абсолютное (Absolute)
С помощью абсолютного позиционирование задаются координаты левого верхнего угла блока. При этом отсчет координат происходит относительно расположения родительского элемента. Если родительским элементом является окно браузера, тогда выравнивание блока происходит относительно него. Если существует другой элемент, внутри которого расположен блок, тогда выравнивание происходит уже относительно этого элемента.
Фиксированное (Fixed)
Уже из названия становится ясно, что в данном случае элемент фиксируется. Он располагается в определенном месте веб-страницы и никуда не сдвигается. Подобное выравнивание часто применяется по отношению к всплывающим окнам, когда они фиксируются по центру и не смещаются при прокрутке страницы.
Относительное (Relative)
С этим видом позиционирования могут быть сложности. Его название не совсем удачное. Многие путают относительное и абсолютное позиционирование элементов. Может показаться, что выравнивание происходит относительно родительского элемента. А в случае с абсолютным позиционированием - относительно окна браузера. Но это не так.
Нужно уяснить, что расположение элемента в этом случае происходит относительно его же места в статическом положении. Это то, о чем упоминалось выше.
Проще говоря, вы указываете браузеру, что необходимо передвинуть элемент на столько-то пикселей, относительно того места, где он расположен по умолчанию.
Существует еще один сложный момент. Что произойдет, если родительский элемент имеет относительное позиционирование, а вложенный в него элемент абсолютное? В этом случае отсчет координат дочернего элемента будет производиться относительно родительского элемента, с учетом его смещения, если оно имеет место.
Подведем итог.
Итак, имеется свойство position
. Это свойство может принимать 4 значения Static, Absolute, Fixed и Relative
. По умолчанию идет Static
.
Когда вы указываете координаты для элемента, необходимо также сообщить браузеру, каким образом он должен эти координаты отсчитывать. Надо дать ему отправную точку.
Не забывайте, что при отсутствии свойства position
координаты учитываться не будут, блок останется на прежнем месте, в своем статическом положении.
А теперь посмотрим, каким образом задаются координаты.
Для этих целей применяются четыре вида свойств:
1. Top
2. Left
3. Right
4. Bottom
Top
- положительное значение (например, 20px) смещает блок на 20 пикселей вниз. Отрицательное значение (-20px) смещает элемент на 20 пикселей верх. Все это происходит относительно левого верхнего угла.
Left
- смещение влево или вправо, в зависимости от знака. Относительно левого верхнего угла.
Right
- смещение вправо и влево, смотря какой знак. Относительно правого верхнего угла.
Bottom
- смещение вверх или вниз, зависит от знака. Происходит относительно левого нижнего угла.
Вот код HTML:
А это CSS:
#1 {
position:relative;
top:100px;
left:100px;
width:500px;
height:500px;
background-color:#CCCCCC;
}
#11 {
background-color:#003399;
position:absolute;
bottom: -30px;
right: -50px;
width:100px;
height:100px;
}
#2 {
background-color:#990066;
width:200px;
height:300px
}
Потренируйтесь.
Пока писал и сам разобрался .
15.03.2017
Пока нет
Всем привет!
В сегодняшнем уроке я расскажу, как при помощи позиционирования блоков можно размещать элемент в любом месте экрана.
Что нам дает позиционирование блоков? С помощью позиционирования блоков веб-мастер сможет создать любой уникальный дизайн сайта, размещая блоки там, где ему хочется. Чтобы разместить блоки в любом месте экрана, достаточно указать координаты.
Координаты в CSS
Свойство «
TOP
» | «
LEFT
» | «
RIGHT
» | «
BOTTOM
»
К позиционированию блоков обязательно прописывают координаты, то есть, где будет размещен блок.
Схема системы координат:
Координаты указываются четырьмя правилами:
Синтаксис:
Правило_Координата: значение_координата;
Значение:
Значение указывать в px или в %.
Top:100px; /* верхний край*/
left:100px; /* левый край*/
Достаточно только указывать координаты на два края (на top или bottom, на left или right).
Позиционирование в CSS
Свойство «
POSITION
»
Позиционирование прописывается в CSS через правило «position
» с нужным значением.
Синтаксис:
Position: значение;
Значение:
Давайте пройдемся по каждому значению.
Значение «
ABSOLUTE»
Абсолютное позиционирование дает возможность веб-мастеру разместить блоки на веб-странице в любом месте экрана. Достаточно в CSS прописать правило «position
» со значением «absolute
» и нужными координатами:
Position:absolute; /* абсолютное позиционирование*/
Блок в css
Результат:
Значение «
RELATIVE
»
Относительное позиционирование дает возможность веб-мастеру сместить блок на веб-странице, но первоначальное место блока не освобождается для другого элемента. В CSS пропишите правило «position
» со значением «relative
» и нужными координатами:
Position:relative; /* относительное позиционирование*/
Блок в css
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a element in the section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
Результат:
По умолчанию
Относительное позиционирование
Фиксированное позиционирование в CSS
Значение «FIXED»
Фиксированное позиционирование дает возможность веб-мастеру разместить блоки на веб-странице в любом месте экрана и при прокрутке веб-страницы блок будет всегда располагаться относительно окна браузера (всегда будет виден на экране). Достаточно в CSS прописать правило «position
» со значением «fixed
» и нужными координатами:
Position:fixed; /* фиксированное позиционирование*/
Блок в css
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a element in the section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
Если результат не виден и не понятен, добавьте текста столько, чтобы на экране веб-страницы появилась полоса прокрутки.
Вот и закончили урок! Осталось еще 2-3 урока и вы закончите осваивать основы CSS. Это значит, что вы сможете с легкостью создавать красивые сайты.
Не пропустите остальные уроки! Подписывайтесь на обновления!
Предыдущая запись
Следующая запись
В языке HTML все элементы можно разделить на блочные и строчные. Блочные элементы обычно представляются как прямоугольные области с некоторым количеством информации. С их помощью выстраивается сетка страницы. Такие элементы занимают все доступное им пространство по ширине, а до и после них обычно присутствует перенос строки. Блокам можно задавать отступы, горизонтальные и вертикальные размеры.
Особенности блочных элементов
К блочным относятся теги, выделяющие большое количество текстовой информации:
,
Категории
Видеоматериалы
Популярное
Как уже говорилось выше, задать местоположение можно любому HTML элементу. Для этого нет нужды всегда использовать тег
Смысл применения блока, заданного тегом Существует четыре основных типа позиционирования: 1. Статическое (Static) Используется как расположение «по умолчанию». В этом случае браузер просматривает html код, разделяет его на элементы и составляет из них страницу. Получается последовательность из ряда элементов. Выводятся они в том порядке, в котором указаны в html коде. Применение параметров left, top, right и bottom
не приводит к каким-либо результатам. Необходимо помнить о статическом позиционировании, когда используется относительное расположение. С помощью абсолютного позиционирование задаются координаты левого верхнего угла блока. При этом отсчет координат происходит относительно расположения родительского элемента. Если родительским элементом является окно браузера, тогда выравнивание блока происходит относительно него. Если существует другой элемент, внутри которого расположен блок, тогда выравнивание происходит уже относительно этого элемента. Уже из названия становится ясно, что в данном случае элемент фиксируется. Он располагается в определенном месте веб-страницы и никуда не сдвигается. Подобное выравнивание часто применяется по отношению к всплывающим окнам, когда они фиксируются по центру и не смещаются при прокрутке страницы. С этим видом позиционирования могут быть сложности. Его название не совсем удачное. Многие путают относительное и абсолютное позиционирование элементов. Может показаться, что выравнивание происходит относительно родительского элемента. А в случае с абсолютным позиционированием - относительно окна браузера. Но это не так. Нужно уяснить, что расположение элемента в этом случае происходит относительно его же места в статическом положении. Это то, о чем упоминалось выше. Проще говоря, вы указываете браузеру, что необходимо передвинуть элемент на столько-то пикселей, относительно того места, где он расположен по умолчанию. Существует еще один сложный момент. Что произойдет, если родительский элемент имеет относительное позиционирование, а вложенный в него элемент абсолютное? В этом случае отсчет координат дочернего элемента будет производиться относительно родительского элемента, с учетом его смещения, если оно имеет место. Итак, имеется свойство position
. Это свойство может принимать 4 значения Static, Absolute, Fixed и Relative
. По умолчанию идет Static
. Когда вы указываете координаты для элемента, необходимо также сообщить браузеру, каким образом он должен эти координаты отсчитывать. Надо дать ему отправную точку. Не забывайте, что при отсутствии свойства position
координаты учитываться не будут, блок останется на прежнем месте, в своем статическом положении. Для этих целей применяются четыре вида свойств: 1. Top Top
- положительное значение (например, 20px) смещает блок на 20 пикселей вниз. Отрицательное значение (-20px) смещает элемент на 20 пикселей верх. Все это происходит относительно левого верхнего угла. Left
- смещение влево или вправо, в зависимости от знака. Относительно левого верхнего угла. Right
- смещение вправо и влево, смотря какой знак. Относительно правого верхнего угла. Bottom
- смещение вверх или вниз, зависит от знака. Происходит относительно левого нижнего угла. Вот код HTML:
А это CSS:
#1 { #11 { #2 { Потренируйтесь. Пока писал и сам разобрался .
15.03.2017 Пока нет Всем привет! Свойство «
TOP
» | «
LEFT
» | «
RIGHT
» | «
BOTTOM
»
Схема системы координат: Координаты указываются четырьмя правилами: Синтаксис: Правило_Координата: значение_координата;
Значение: Top:100px; /* верхний край*/
left:100px; /* левый край*/
Достаточно только указывать координаты на два края (на top или bottom, на left или right). Свойство «
POSITION
»
Синтаксис: Position: значение;
Значение: Давайте пройдемся по каждому значению. Значение «
ABSOLUTE»
Position:absolute; /* абсолютное позиционирование*/
Результат: Значение «
RELATIVE
»
Position:relative; /* относительное позиционирование*/
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a element in the section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
Результат: По умолчанию Относительное позиционирование Значение «FIXED»
Position:fixed; /* фиксированное позиционирование*/
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a element in the section
External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
Если результат не виден и не понятен, добавьте текста столько, чтобы на экране веб-страницы появилась полоса прокрутки. Вот и закончили урок! Осталось еще 2-3 урока и вы закончите осваивать основы CSS. Это значит, что вы сможете с легкостью создавать красивые сайты. Предыдущая запись В языке HTML все элементы можно разделить на блочные и строчные. Блочные элементы обычно представляются как прямоугольные области с некоторым количеством информации. С их помощью выстраивается сетка страницы. Такие элементы занимают все доступное им пространство по ширине, а до и после них обычно присутствует перенос строки. Блокам можно задавать отступы, горизонтальные и вертикальные размеры. К блочным относятся теги, выделяющие большое количество текстовой информации: Позиционирование элементов.
2. Абсолютное (Absolute)
3. Фиксированное (Fixed)
4. Относительное (Relative
)Статическое (Static)
Абсолютное (Absolute)
Фиксированное (Fixed)
Относительное (Relative)
Подведем итог.
А теперь посмотрим, каким образом задаются координаты.
2. Left
3. Right
4. Bottom
position:relative;
top:100px;
left:100px;
width:500px;
height:500px;
background-color:#CCCCCC;
}
background-color:#003399;
position:absolute;
bottom: -30px;
right: -50px;
width:100px;
height:100px;
}
background-color:#990066;
width:200px;
height:300px
}
В сегодняшнем уроке я расскажу, как при помощи позиционирования блоков можно размещать элемент в любом месте экрана.
Что нам дает позиционирование блоков? С помощью позиционирования блоков веб-мастер сможет создать любой уникальный дизайн сайта, размещая блоки там, где ему хочется. Чтобы разместить блоки в любом месте экрана, достаточно указать координаты.Координаты в CSS
К позиционированию блоков обязательно прописывают координаты, то есть, где будет размещен блок.
Значение указывать в px или в %.Позиционирование в CSS
Позиционирование прописывается в CSS через правило «position
» с нужным значением.
Абсолютное позиционирование дает возможность веб-мастеру разместить блоки на веб-странице в любом месте экрана. Достаточно в CSS прописать правило «position
» со значением «absolute
» и нужными координатами:
Относительное позиционирование дает возможность веб-мастеру сместить блок на веб-странице, но первоначальное место блока не освобождается для другого элемента. В CSS пропишите правило «position
» со значением «relative
» и нужными координатами:Фиксированное позиционирование в CSS
Фиксированное позиционирование дает возможность веб-мастеру разместить блоки на веб-странице в любом месте экрана и при прокрутке веб-страницы блок будет всегда располагаться относительно окна браузера (всегда будет виден на экране). Достаточно в CSS прописать правило «position
» со значением «fixed
» и нужными координатами:
Не пропустите остальные уроки! Подписывайтесь на обновления!
Следующая запись Особенности блочных элементов