Фиксированный дизайн. Позиционирование | htmlbook.ru
Кроме использования свойства float для размещения рядом по горизонтали двух
и более слоев, для этой же цели применяется и свойство position. Сложно оценить,
какой подход с применением этих свойств лучше, если они в итоге дают одинаковый
результат. Однако у позиционирования заведомо больший потенциал, позволяющий
не только располагать слои рядом, но и накладывать их друг на друга. С помощью
таких «перекрытий» можно создать выразительный дизайн веб-страниц простыми средствами.
Координаты слоя
Положение слоя в документе зависит от заданных значений стилевых свойств
left, top, right и bottom,
они устанавливают соответственно позицию слоя слева, сверху, справа и снизу.
Точка отсчета определяется в зависимости от свойства position,
которое принимает обычно значение relative (относительное
положение) или absolute (абсолютное
положение).
При абсолютном позиционировании слой располагается относительно родительского элемента или окна браузера,
если родитель не задан, как показано на рис.
1.
Рис. 1. Положение слоя относительно окна браузера
В случае использования относительного позиционирования, координаты отсчитываются
от исходного положения слоя (рис. 2). Здесь пунктиром выделено первоначальное
положение слоя, а сплошной линией результат его перемещения.
Рис. 2. Положение слоя относительно исходного положения
Положительные значения свойства left сдвигают
слой вправо, отрицательные —
влево. С right дело обстоит наоборот,
положительные значения этого свойства смещают слой влево, а отрицательные —
вправо. Аналогичная ситуация и с парой top/bottom.
Значения со знаком минус у свойства top поднимают
слой вверх, а положительные значения опускают слой вниз. bottom же
действует с точностью наоборот.
Заметим, что указание свойства position без упоминания координат (значений
left, top, right или bottom) не меняет положение текущего слоя, но оказывает
влияние на расположение близлежащих или вложенных слоев.
Размещение двух слоев
При размещении двух слоев рядом по горизонтали, левому слою необходимо задать
абсолютное положение, а правому — относительное (пример 1). Это наиболее
универсальный подход, который гарантирует, что слои будут позиционированы правильно
относительно друг друга и окна браузера. При этом не имеет значения, как будет
располагаться макет — по левому краю или по центру окна — слои не
изменят своего положения. Обязательно следует сместить правый слой (в примере
он называется rightcol) по горизонтали с помощью
свойства left на
величину, равную ширине левого слоя. В противном случае слои будут накладываться
друг на друга.
Пример 1. Размещение двух слоев
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Позиционирование</title>
<style type="text/css">
#leftcol {
position: absolute; /* Абсолютное позиционирование */
width: 200px; /* Ширина слоя */
background: #800000; /* Цвет фона */
color: white; /* Цвет текста */
}
#rightcol {
position: relative; /* Относительное позиционирование */
left: 200px; /* Смещаем слой вправо на ширину левого слоя */
width: 550px; /* Ширина слоя */
background: #e0e0e0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>Левая колонка</div>
<div>Правая колонка </div>
</body>
</html>Несмотря на простоту решения, в данном случае следует учесть несколько моментов.
- Использование position: absolute для
левой колонки, хотя и не дает видимого результата, необходимо для того, чтобы
правая колонка не «перескакивала» вниз, и слои располагались на одном уровне. - Положение правого слоя rightcol зависит от
значения стилевого свойства left, оно в данном
случае должно равняться ширине левого слоя, в этом случае слои будут плотно
прилегать между собой. Впрочем, ничего не мешает изменять этот параметр в
ту или иную сторону. Тогда между слоями появится разделительная полоса или
наоборот, слои станут накладываться друг на друга. - Свойство padding, добавляющее поля вокруг
текста, если его использовать в стиле левого слоя leftcol,
вносит искажения в макет страницы для браузера.
Это связано с тем, что ширина элемента в браузере складывается из
значений width, padding и margin.
Поскольку добавление полей увеличивает ширину слоя, то правая
колонка начинает накладываться поверх левой колонки.
Чтобы устранить эту
особенность, атрибут padding следует применить
к стилю абзаца, который должен располагаться внутри слоя или изменить значение width.
Также можно добавить еще один внутренний слой и указать поля для него
(пример 2).
Пример 2. Поля внутри слоя
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Позиционирование</title>
<style type="text/css">
#leftcol {
position: absolute; width: 200px; background: #800000; color: white;
}
#leftcol div {
padding: 10px; /* Поля вокруг текста в левой колонке */
}
#rightcol {
position: relative; left: 200px; width: 550px; background: #e0e0e0;
}
#rightcol div {
padding: 10px; /* Поля вокруг текста в правой колонке */
}
</style>
</head>
<body>
<div>
<div>Левая колонка</div>
</div>
<div>
<div>Правая колонка</div>
</div>
</body>
</html>Резюме
Позиционирование слоев предполагает использование стилевого свойства position,
которое задает, относительно каких координат ведется положение слоя.
Для значения
absolute за основу берется родительский элемент или окно браузера, относительно границ которого и указывается,
где должен располагаться слой на веб-странице. Значение relative задает смещение
слоя относительно его исходного расположения.
Сочетая для двух слоев position и устанавливая слоям новое
положение, можно формировать макет веб-страницы, состоящий из двух и более
колонок. Причем можно управлять процессом наложения слоев друг на друга, получая
таким образом интересные дизайнерские эффекты
HTML5 | Фиксированное позиционирование
Фиксированное позиционирование
Последнее обновление: 28.04.2016
Фиксированное позиционирование является распространенным способом удержать в области просмотра браузера некоторые элементы. Достаточно часто на различных сайтах
можно увидеть фиксированную панель навигации, которая не изменяет своего положения вне зависимости от прокрутки.
Для фиксированного позиционирования у элементов нужно установить значение fixed для свойства position.
После
этого с помощью стандартных свойств left, right, top и bottom можно определить конкретную
позицию фиксированного элемента.
Создадим к примеру фиксированную панель навигации:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Позиционирование в HTML5</title>
<style>
body{
margin:0;
padding:0;
}
.toolbar{
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #222;
border-bottom: 1px solid #ccc;
}
.toolbar a{
color: #eee;
display: inline-block;
padding: 10px;
text-decoration: none;
font-family: Verdana;
}
.content{
margin-top: 50px;
padding: 10px;
}
</style>
</head>
<body>
<div>
<a href="#">Главная</a>
<a href="#">Блог</a>
<a href="#">Контакты</a>
<a href="#">О сайте</a>
</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry....</div>
</body>
</html>
Lorem Ipsum has been the industry....</div>
</body>
</html>
Чтобы растянуть фиксированный блок от левой до правой границы страницы, устанавливаются три свойства:
top: 0; left: 0; right: 0;
Для нижележащего блока с основным содержанием фиксированный элемент фактически не существует разметке, так как блок с фиксированным, как и с абсолютным позиционированием
не учавствуют в стандартном потоке html. Поэтому по умолчанию оба блока будут накладываться друг на друга и размещатьс в одной точке. И нам надо должным образом разместить блок содержимого относительно фиксированного блока, например,
установив нужный отступ:
margin-top: 50px;
Фактически отступ идет от границ области просмотра браузера, поэтому высота отступа должна быть больше высоты фиксированного элемента.
Позиционирование — Изучение веб-разработки | MDN
Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера.
Эта статья объясняет разные значения position и как их использовать.
| Необходимые знания: | Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.) |
|---|---|
| Задача: | Изучить как работает CSS позиционирование. |
Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию 0_basic-flow.html из нашего GitHub репозитория (исходный код здесь) и используйте его как отправную точку.
Введение в позиционирование
Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент — позиционирование.
Или если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.
Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство position.
Статическое позиционирование
Статическое позиционирование — это умолчание, которое получает каждый элемент, что всего лишь значит «поставить элемент в его нормальное положение в потоке макета документа — ничего особенного для рассмотрения».
Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте class positioned ко второму <p> в HTML:
<p> ... </p>
А теперь добавьте следующее правило в конец вашего CSS:
.
positioned {
position: static;
background: yellow;
}И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновленного цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!
Относительное позиционирование
Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего свое место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление position в вашем коде:
position: relative;
Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства top, bottom, left, и right которые мы объясним в следующем разделе.
Введение в top, bottom, left, и right
top, bottom, left, и right используются вместе с position чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу .positioned в вашем CSS:
top: 30px; left: 30px;
Примечание: значения этих свойств могут принимать любые единицы которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д.
Если вы сейчас сохраните и обновите, вы получите примерно такой результат:
<h2>Relative positioning</h2> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> <p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> <p>We are separated by our margins.
Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: relative;
background: yellow;
top: 30px;
left: 30px;
}Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону.
Так, например, если вы указали top: 30px;, сила толкает блок, заставляя его перемещаться вниз на 30px.
Абсолютное позиционирование
Абсолютное позиционирование дает совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:
position: absolute;
Если вы сохраните и обновновите, то вы должны увидеть нечто подобное:
<h2>Absolute positioning</h2> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> <p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line.
Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своем собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы.
Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; функции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы; и так далее…
Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что top, bottom, left, и right ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха «содержащего элемента» и 30px от левого края (В этом случае «содержащий элемент» является исходным содержащим блоком. См. раздел ниже для дополнительной информации).
Примечание: Вы можете использовать top, bottom, left, и right для изменения размера элемента если вам надо.
Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдет! Потом снова все верните…
Примечание: Да, margin-ы все еще влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.
Контекст позиционирования
Какой элемент является «содержащим» относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. Определение содержащего блока).
Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в исходным содержащем блоке. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент <html>. Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента <html> и будет расположен относительно исходного окна просмотра.
Позиционируемый элемент вложен в <body> в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить контекст позиционирования — относительно какого элемента позиционируется позиционируемый элемент. Это делается путем установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего body:
position: relative;
Это должно дать следующий результат:
<h2>Positioning context</h2> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> <p>Now I'm absolutely positioned relative to the <code><body></code> element, not the <code><html></code> element!</p> <p>We are separated by our margins.
Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>body {
width: 500px;
margin: 0 auto;
position: relative;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}Позиционируемый элемент теперь располагается относительно элемента <body>.
Введение в z-index
Все это абсолютное позиционирование — хорошее развлечение, но кое-что чего мы еще не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы «побеждают» не позиционированные элементы.
Что же насчет того, когда мы имеем более одного?
Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:
p:nth-of-type(1) {
position: absolute;
background: lime;
top: 10px;
right: 30px;
}На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещен чуточку выше того места, где он был исходно. А также он расположен под оригинальным параграфом .positioned, где они оба перекрываются. Это потому что параграф .positioned является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.
Можете ли вы изменить порядок наложения? Да, можете, используя свойство z-index. «z-index» это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней.
(0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).
У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что еще вам нравится иметь перед экраном). Значения z-index влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-index auto, что фактически равно 0.
Для того чтобы изменить порядок наложения, попробуйте объявить для вашего p:nth-of-type(1) правила:
z-index: 1;
Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:
<h2>z-index</h2> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.
</p>
<p>Now I'm absolutely positioned relative to the <code><body></code> element, not the <code><html></code> element!</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>body {
width: 500px;
margin: 0 auto;
position: relative;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
. positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
p:nth-of-type(1) {
position: absolute;
background: lime;
top: 10px;
right: 30px;
z-index: 1;
}
positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
p:nth-of-type(1) {
position: absolute;
background: lime;
top: 10px;
right: 30px;
z-index: 1;
}
Обратите внимание что z-index принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.
Фиксированное позиционированиее
А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), фиксированное позиционирование обычно фиксирует элемент в месте относительно видимой части области просмотра, кроме случаев, когда один из его потомков является фиксированным блоком из-за того, что его свойству transform отличается от none.
Это значит, что вы можете создать элементы пользовательского интерфейса, которые зафиксированы на месте, как постоянные меню навигации, которые всегда видимы вне зависимости от того сколько прокручивается страница.
Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила p:nth-of-type(1) и .positioned из вашего CSS.
А теперь, обновите правило body удалив объявление position: relative; и добавьте фиксированную высоту как тут:
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}Теперь мы собираемся дать элементу <h2> position: fixed;, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:
h2 {
position: fixed;
top: 0;
width: 500px;
margin-top: 0;
background: white;
padding: 10px;
}top: 0; необходим чтобы приклеить его к верху экрана.
мы дали заголовку ту же ширину что и колонкам с контентом и затем даем ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.
Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимо
Точное позиционирование картинки на веб-странице
There are no translations available.
В ряде случаев веб-мастера при создании сайтов или верстке веб-страниц и шаблонов сталкиваются с ситуацией, когда необходимо точно поместить картинку в нужном месте страницы так, чтобы совместить ее с изображением заднего фона. К примеру, мы имеем рисунок дизайна главной страницы сайта и на этом рисунке есть такой фрагмент:
Фрагмент рисунка дизайна страницы.
Нам нужно «разрезать» этот рисунок на отдельные картинки и сделать его точную копию на странице создаваемого сайта. Внимательно присмотревшись к фрагменту дизайна, мы видим, что:
- Задний фон состоит из повторяющегося фрагмента, поэтому его можно вырезать отдельно и сделать фоном тега div или td.
- Логотип имеет сзади полупозрачную, плавно исчезающую тень, поэтому его нельзя вырезать ровно по краю, а придется захватить часть заднего фона.
В результате мы получим две картинки:
| Картинка 1. Задний фон. | Картинка 2. Логотип с частью заднего фона. |
Теперь нам необходимо поместить их на страницу сайта и совместить с точностью до пикселя. Есть масса способов как это сделать:
- Сделать таблицу и порезав ее на ячейки, пытаться совместить края картинки 2 с фоном;
- С помощью однопиксельного прозрачного gif файла можно отодвинуть картинку 2 вниз и вправо;
- Вместо прозрачного gif файла можно использовать поля образованные с помощью тега div;
- И так далее. ..
..
Можно придумать довольно много вариантов реализации подобной задачи, но я хочу предложить вам самый, на мой взгляд, простой и эффективный способ точного позиционирования картинки внутри какого-либо тега. Он заключается в прописывании внутри тега img стиля, в котором мы задаем смещение картинки сверху и слева. Html код картинки будет выглядеть вот так:
<img src=»http://artwebmaster.ru/images/stories/content/logo.gif» border=»0″/>
Фоновое изображение пустим, к примеру, по тегу div, хотя можно и по tr — это кому как нравиться. В результате получаем:
<div align=»left»> <img src=»http://artwebmaster.ru/images/stories/content/logo.gif» border=»0″/></div>
Вот как это все будет выглядеть:
Совмещенные картинки фона и логотипа.
Все прекрасно и замечательно — картинка точно попадает туда, где ей и положено быть, что нам и требуется.
Используя этот способ, для точного позиционирования картинки нужно всего лишь изменить значения padding-left (отступ картинки слева) и padding-top (отступ картинки сверху).
Теперь несколько важных замечаний:
- Следует иметь ввиду, что тег, внутри которого будет помещена картинка, должен, либо иметь жестко заданную высоту и ширину (с помощью width и height), либо картинка должна быть «прилеплена» к верхней и левой стороне тега (в теге td это делается с помощью valign и align). В идеале лучше сделать и то и другое.
Если этого не делать, то картинка может «съезжать» со своего места в зависимости от окружающих тегов, окружающего текста и картинок. Вы, возможно, видели такие сайты, у которых при переходе от страницы к странице графика начинает «разъезжаться». - В примере, описанном выше, стили помещены внутри тегов. Это совсем не обязательно и сделано лишь для наглядности. В принципе, их можно вынести в отдельный CSS файл таблицы стилей.
Вот собственно и вся премудрость. Как вы сами видите, ничего сложного в этом способе нет, но поставленную задачу он выполняет прекрасно.
Желаю Вам удачи и успехов в веб-программировании!
===============================
© 2007 Соловьев И.
В.
Урок 11. Позиционирование в CSS
В CSS есть свойства, которые отвечают за позиционирование элемента. То есть, ему отступы будут заданы от края документа или относительно родительского элемента? Для этого используется свойство position. Оно имеет несколько значений, о них и напишу.
absolute
Данное значение устанавливается для таких элементов, которые должны отображаться так, как будто других на странице и не существует.
Положение зависит от того, есть ли родительские элементы с таким же свойством (position absolute relative fixed):
1. если нет, то положение будет определяться относительно левого верхнего угла окна
2. если есть, то будет положение будет определяться относительно них
fixed
Чёткое фиксированное положение элемента. Его координаты будут привязаны к X,Y сторонам браузера. При скролле страницы элементы будут оставаться на своём месте.
relative
Данное значение определяет положение элемента уже относительно его исходного места.
static
Значение устанавливает элемент так, как он должен располагаться в обычном состояние относительно других элементов.
Располагаем элементы
Установив значения absolute relative fixed элементом возможно манипулировать, перемещая его относительно других элементов. Делается это свойствами top, right, bottom, left. Значения данных свойств устанавливают на сколько сместится элемент относительного текущего положения.
#wrapper {
position: relative;
bottom: 15px; /* смещен на 15px от низа */
left: 30px; /* смещен на 30px слева */
}При этом можно указывать и отрицательные значения.
#wale {
position: relative;
right: -10px; /* смещен на -10px справа (10px слева) */
}Примеры позиционирования в CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.
position: relative; /* Относительное позиционирование */
background: #f0f0f0; /* Цвет фона */
height: 200px; /* Высота блока */
}
.layer2 {
position: absolute; /* Абсолютное позиционирование */
bottom: 15px; /* Положение от нижнего края */
right: 15px; /* Положение от правого края */
line-height: 1px;
}
</style>
</head>
<body>
<div class="layer1">
<div class="layer2">
<div style="width:250px;height:100px;background-color:#50A5D6"></div>
</div>
</div>
</body>
</html>
layer1 {Ну и уже по обыкновению смотрим пример проработки) Для наглядности попробуйте изменить размеры окна браузера.Демонстрация Скачать исходники
С помощью данного свойства можно выстраивать сложную структуру web-документа.
Главное не запутаться)
Спасибо за внимание!
Введение в курс «Основы позиционирования элементов. CSS.»
Приветствую вас в курсе «CSS. Основы позиционирования элементов на веб-странице». Это вводное видео, в котором я хотел бы рассказать, о чем этот курс и зачем он вам может быть нужен.
Элементы на веб-странице идут, как правило, по умолчанию, в нормальном потоке. Что это значит? Блочные элементы (например, div) располагаются друг под другом, а строчные – такие, как span, и им подобные – один за другим в пределах одной строки, пока хватает места.
Все было бы хорошо, но как только мы приступаем к верстке какого-то макета сайта, нам приходится сталкиваться с тем, что элементы нужно расположить определенным образом – не так, как они располагаются по умолчанию.
Основная задача – вывести эти элементы из нормального потока и расположить в такой позиции, в какой Вам бы хотелось.
Без знания основ позиционирования элементов добиться какого-либо эффекта позиционирования на веб-странице будет очень трудно.
Этот курс о двух CSS-свойствах. Первое – это свойство position. И второе свойство – это float. Свойство position отвечает за позиционирование элементов на веб-странице, а свойство float – за обтекание элементов.
Это два базовых свойства, с помощью них Вы можете изменить нормальный поток элементов на веб-странице, расположить их в том порядке, который Вам необходим. Мы разберем то, как эти два свойства будут влиять на свойства тех элементов, к которым они будут применяться, и рассмотрим основные техники позиционирования, узнаем, какие есть трюки, чтобы делать все проще и эффективнее.
Знание основ позиционирования элементов – это та база, которая обязательно нужна любому человеку, который собирается работать с технологией CSS, верстать веб-страницы, располагать элементы нужным образом. Эту базу нужно пройти на практике и буквально прочувствовать на себе.
Надеюсь, данный курс поможет Вам пройти этот путь как можно быстрее и эффективнее. Буду очень рад видеть Вас среди участников этого курса.
Напишите в комментариях:
1) Был ли опыт работы с позиционированием элементов на веб-страницах до этого? В чем были трудности?
2) Может вы знаете еще другие свойства CSS, которые отвечают за позиционирование элементов на веб-страницах, кроме float и position?
3) Подготовьте HTML и CSS документ, в котором будете работать и свой блокнот или другую систему, где вы будете фиксировать полученные знания.
Как это организую я, можно посмотреть здесь
Если не секрет, поделитесь, где и как Вы храните справочные данные по веб-разработке. Это обычный блокнот или другое решение?
Positioning — Изучите веб-разработку
Позиционирование позволяет исключить элементы из обычного потока макета документа и заставить их вести себя иначе; например, сидеть друг на друге или всегда оставаться в одном месте в области просмотра браузера.
В этой статье объясняются различные значения позиции и их использование.
Мы бы хотели, чтобы вы выполняли упражнения на вашем локальном компьютере, если возможно — возьмите копию 0_basic-flow.html из нашего репозитория GitHub (исходный код здесь) и используйте его в качестве отправной точки.
Знакомство с позиционированием
Вся идея позиционирования состоит в том, чтобы позволить нам переопределить базовое поведение потока документов, описанное выше, для получения интересных эффектов. Что, если вы хотите немного изменить положение некоторых блоков внутри макета по сравнению с их положением в потоке макета по умолчанию, чтобы придать немного причудливое, неприятное ощущение? Позиционирование — ваш инструмент. Или если вы хотите создать элемент пользовательского интерфейса, который плавает поверх других частей страницы и / или всегда находится в одном и том же месте внутри окна браузера независимо от того, сколько прокручивается страница? Расположение делает возможными такие макетные работы.
Существует ряд различных типов позиционирования, которые можно применить к элементам HTML. Чтобы активировать определенный тип позиционирования для элемента, мы используем свойство position .
Статическое позиционирование
Статическое позиционирование — это значение по умолчанию, которое получает каждый элемент — это просто означает «поместить элемент в его обычное положение в потоке макета документа — здесь нет ничего особенного».
Чтобы продемонстрировать это и настроить ваш пример для будущих разделов, сначала добавьте класс из , расположенный , ко второму
в HTML:
...
Теперь добавьте следующее правило внизу вашего CSS:
.positioned {
положение: статическое;
фон: желтый;
} Если вы сейчас сохраните и обновите, вы не увидите никакой разницы, кроме обновленного цвета фона 2-го абзаца. Это нормально — как мы уже говорили, статическое позиционирование — поведение по умолчанию!
Относительное позиционирование
Относительное позиционирование — это первый тип позиции, который мы рассмотрим.
Это очень похоже на статическое позиционирование, за исключением того, что после того, как позиционируемый элемент занял свое место в нормальном потоке макета, вы можете изменить его окончательное положение, в том числе сделать так, чтобы он перекрывал другие элементы на странице.Обновите позицию в своем коде:
позиция: относительная;
Если вы сохраните и обновите на этом этапе, вы вообще не увидите изменений в результате. Так как же изменить положение элемента? Вам необходимо использовать top ,
Advanced Positioning Tutorial | HTML и CSS — это сложно
Абсолютное позиционирование
«Абсолютное позиционирование» аналогично относительному позиционированию, но
смещение относится ко всему окну браузера, а не к исходному
положение элемента.Поскольку больше нет отношений с
статический поток страницы, считайте, что это самый ручной способ разметки
элемент.
Давайте посмотрим, добавив в нашу таблицу стилей следующее правило:
. item-absolute {
позиция: абсолютная;
верх: 10 пикселей;
слева: 10 пикселей;
}
item-absolute {
позиция: абсолютная;
верх: 10 пикселей;
слева: 10 пикселей;
}
Наша структура HTML такая же, как и в предыдущем примере, но
прикрепите фиолетовое изображение в верхнем левом углу окна браузера. Вы можете
также попробуйте установить нижнее значение или правое значение , чтобы получить
более четкое представление о том, что происходит.
Другой интересный эффект absolute состоит в том, что он полностью
удаляет элемент из обычного потока страницы. Это легче увидеть с
элементы, выровненные по левому краю, поэтому давайте временно изменим
justify-content в нашем правиле .example :
.example {
дисплей: гибкий;
justify-content: гибкий старт;
}
В нашем примере относительного позиционирования (первая строка) все еще есть
пространство, где раньше находился позиционируемый элемент, но с абсолютным позиционированием,
это пространство исчезло.
Это как если бы .item-absolute
не существует даже для своих родительских и окружающих элементов. Обязательно
измените justify-content обратно на space-about
прежде чем двигаться дальше.
В большинстве случаев такое поведение не очень полезно, потому что оно
будет означать все, что на вашей странице должно быть абсолютно
позиционируется — иначе мы получим непредсказуемое перекрытие статических
элементы с абсолютными элементами. Итак, почему абсолютно даже
существовать?
(относительно) Абсолютное позиционирование
Абсолютное позиционирование становится гораздо более практичным, когда оно выполняется относительно
какой-то другой элемент, — это в статическом потоке страницы.К счастью, есть способ изменить систему координат
абсолютно позиционированный элемент.
Координаты абсолютных элементов всегда относительно ближайшего
контейнер, который является позиционированным элементом.
Он только возвращается к тому, чтобы относиться к
браузер, когда ни один из его предков не позиционируется. Итак, если мы изменим
.item-absolute родительский элемент должен быть относительно позиционирован,
он должен появиться в верхнем левом углу , этот элемент вместо
окно браузера.
.absolute {
положение: относительное;
}
Div .absolute размещается в обычном потоке страницы,
и мы можем вручную перемещать наш .item-absolute , где бы мы ни
нужно. Это замечательно, потому что если мы хотим изменить нормальный поток
контейнера, скажем, для мобильного макета, любые абсолютно позиционированные элементы будут
автоматически двигаться вместе с ним.
Обратите внимание, что мы не указали координаты смещения для
.абсолютный .Мы используем относительное позиционирование подошвы
чтобы позволить нашему абсолютному элементу вернуться в нормальный поток
страница. Вот как мы безопасно комбинируем абсолютное позиционирование со статическим
позиционирование.
Урок 14: Размещение элементов руководство
С помощью CSS-позиционирования вы можете разместить элемент именно там, где хотите, на странице. Вместе с поплавками (см. Урок 13) позиционирование дает вам множество возможностей для создания продвинутого и точного макета.
На этом уроке будет обсуждаться следующее:
Принцип позиционирования CSS
Представьте себе окно браузера как систему координат:
Принцип позиционирования CSS заключается в том, что вы можете расположить любой прямоугольник в любом месте системы координат.
Допустим, мы хотим разместить заголовок. При использовании блочной модели (см. Урок 9) заголовок будет выглядеть следующим образом:
Если мы хотим, чтобы этот заголовок располагался на 100 пикселей от верха документа и на 200 пикселей слева от документа, мы могли бы ввести в наш CSS следующий код:
h2 {
позиция: абсолютная;
верх: 100 пикселей;
слева: 200 пикселей;
}
Результат будет следующим:
Как видите, позиционирование с помощью CSS — это очень точный метод размещения элементов.
Это намного проще, чем пытаться использовать таблицы, прозрачные изображения или что-то еще.
Абсолютное позиционирование
Элемент с абсолютной позицией не занимает места в документе. Это означает, что после позиционирования он не оставляет пустого места.
Для абсолютного позиционирования элемента свойство position устанавливается как absolute . Впоследствии вы можете использовать свойства слева , справа , вверху и внизу , чтобы разместить коробку.
В качестве примера абсолютного позиционирования мы решили разместить по 4 поля в каждом углу документа:
# box1 {
позиция: абсолютная;
верх: 50 пикселей;
слева: 50 пикселей;
}
# box2 {
позиция: абсолютная;
верх: 50 пикселей;
вправо: 50 пикселей;
}
# box3 {
позиция: абсолютная;
внизу: 50 пикселей;
вправо: 50 пикселей;
}
# box4 {
позиция: абсолютная;
внизу: 50 пикселей;
слева: 50 пикселей;
}
Относительное позиционирование
Чтобы позиционировать элемент относительно, свойство position устанавливается как относительно .
Разница между абсолютным и относительным позиционированием заключается в том, как вычисляется позиция.
Положение относительно позиционированного элемента — , вычисленное из исходной позиции в документе . Это означает, что вы перемещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент по-прежнему получает пространство в документе после его размещения.
В качестве примера относительного позиционирования мы можем попытаться расположить три изображения относительно их исходного положения на странице.Обратите внимание, как изображения оставляют пустые места на своих исходных позициях в документе:
# dog1 {
положение: относительное;
слева: 350 пикселей;
внизу: 150 пикселей;
}
# dog2 {
положение: относительное;
слева: 150 пикселей;
внизу: 500 пикселей;
}
# dog3 {
положение: относительное;
слева: 50 пикселей;
внизу: 700 пикселей;
}
Сводка
В предыдущих двух уроках вы узнали, как перемещать и позиционировать элементы.
Эти два метода дают вам множество возможностей для создания ваших страниц без использования некоторых устаревших методов с таблицами и прозрачными изображениями в HTML.Вместо этого используйте CSS. Он более точный, дает больше преимуществ, а также его намного проще обслуживать.
+ Опубликовать новую тему
<< Урок 13: Плавающие элементы (float)
Урок 15: Слой на слое с z-индексом (Layers) >>
CSS Position (定位) |菜鸟 教程
позиция 属性 指定 了 元素 的 定位 类型。
позиция 属性 的 五个 值 ：
可以 使用 的 顶部 ， 底部 ， 左侧 属性 定位。 然而 ， 这些 属性 工作 是 先 设定 position 属性。 他们 不同 的 工作 方式 ， 取决于 定位 方法。
статический 定位
HTML 的 默认 值 ， 即 没有 定位 ， 遵循 正常 的 文档 流 对象。
静态 定位 的 元素 不会 受到 сверху, снизу, слева, справа 影响。
实例
дел.static {
положение: статическое;
граница: 3px solid # 73AD21;
}
尝试 一下 »
фикс. 定位
元素 的 位置 相 对于 浏览 器 窗口 是 固定 位置。
即使 窗口 是 滚动 的 它 也 不会 移动 ：
实例
с.
pos_fixed
{
положение: фиксированное;
верх: 30 пикселей;
справа: 5 пикселей;
}
尝试 一下 »
注意 ： Фиксированный 定位 在 IE7 和 IE8 下 需要 描述! DOCTYPE 才能 支持。
Фиксированный 定位 使 元素 的 位置 与 文档 流 无关 ， 因此 不 占据 空间。
Фиксированный 定位 的 元素 和 其他 元素 重叠。
родственник 定位
相对 定位 元素 的 定位 是 相对 其 正常 位置。
实例
h3.pos_left
{
положение: относительное;
слева: -20 пикселей;
}
h3.pos_right
{
положение: относительное;
слева: 20 пикселей;
}
尝试 一下 »
移动 相对 定位 元素 ， 但 它 原本 所占 的 空间 不会 改变。
相对 定位 元素 经常 被 用来 作为 绝对 定位 元素 的 容器 块。
абсолютный 定位
定位 的 元素 的 位置 相 对于 最近 的 已 定位 父 元素 ， 如果 元素 没有 的 父 元素 ， 那么 的 位置 相 对于:
абсолютное 使 元素 的 位置 与 文档 流 无关 ， 因此 不 占据 空间。
абсолютное 定位 的 元素 和 其他 元素 重叠。
липкий 定位
липких 文 字面 意思 是 粘 ， 粘贴 ， 所以 可以 把 它 称之为 粘性 定位。
позиция: липкая;基于 用户 的 滚动 位置 来 定位。
粘性 定位 的 元素 是 依赖 于 用户 的 滚动 ， позиция: относительная 与 позиция: фиксированная 定位 之间 切换。
它 的 行为 就像 позиция: относительная; 而 页面 滚动 超出 区域 时 ， 它 的 表现 就像 position: fixed; ， 它 会 固定 在 目标 位置。
元素 定位 表现 为 在 跨越 特定 阈 值 前 为 相对 定位 ， 之后 为 固定 定位。
阈 值 指 的 是 top, right, bottom 或 left 之一 ， 换言之 ， top, right, bottom 或 left 阈 值 其中 之一 ， 其 使 生效。 否则 其 行为 相对 定位 相同。
注意: Internet Explorer, Edge 15 更早 Версия IE липкая 定位。 Safari 需要 使用 -webkit-
префикс (查看 以下 实例)。
实例
дел.
липкий {
позиция: -webkit-sticky;
положение: липкое;
верх: 0;
цвет фона: зеленый;
граница: 2px solid # 4CAF50;
}
尝试 一下 »
的 元素
元素 的 定位 与 文档 流 无关 ， 所以 它们 可以 覆盖 页面 上 的 其它 元素
z-index 属性 指定 了 一个 元素 的 堆叠 顺序 （哪个 元素 应该 放在 前面 ， 或 后面）
一个 元素 可以 有 正 数 或 负数 的 堆叠 顺序 ：
实例
изображение
{
позиция: абсолютная;
слева: 0px;
верх: 0px;
z-индекс: -1;
}
尝试 一下 »
更高 堆叠 顺序 的 元素 总是 在 较低 的 堆叠 顺序 元素 的 前面。
注意 ： 如果 两个 定位 元素 重叠 ， 没有 指定 z — index ， 最后 定位 在 HTML 中 的 元素 将 被 显示 在 最前面。
更多
裁剪 元素 的 外形
此 示例 演示 如何 设置 的 外形。 该 元素 被 剪裁 成 这种 形状 ， 并 出来。
如何 使用 滚动 条 来 显示 元素 内 溢出 的 内容
这个 例子 演示 overflow 属性 创建 一个 滚动 条 当 一个 元素 的 内容 在 指定 的 区域 过 大 时 如何 设置 以 适应。
如何 设置 浏览 器 自动 溢出 处理
这个 例子 演示 了 如何 设置 浏览 器 来 自动 处理 溢出。
更改
这个 例子 演示 了 如何 改变 光标。
的 CSS 定位 属性
«CSS» 列 中 的 数字 表示 哪个 CSS (CSS1 或者 CSS2) 本 了 该 属性。
| 属性 | 说明 | 值 | CSS |
|---|---|---|---|
| низ | 定义 了 定位 元素 下 外边 距 边界 与其 包含 块 下 边界 之间 的 偏移。 | авто длина % наследовать | 2 |
| зажим | 剪辑 一个 绝对 定位 的 元素 | форма авто унаследовать | 2 |
| курсор | 显示 光标 移动 到 指定 的 类型 | url авто прицел по умолчанию указатель переместить электронное изменение размера изменить размер nw-resize n-resize изменить размер sw-resize s-resize w-изменение размера текст подождите помощь | 2 |
| слева | 定义 了 定位 元素 左 外边 距 边界 与其 包含 块 左边界 之间 的 偏移。 | авто длина % наследовать | 2 |
| перелив | 设置 当 元素 的 内容 溢出 其 区域 时 发生 的 事情。 | авто скрытый свиток видимый унаследовать | 2 |
| переполнение | 指定 如何 处理 顶部 / 底部 边缘 的 内容 溢出 元素 的 内容 区域 | авто скрытый свиток видимый без дисплея без содержания | 2 |
| переполнение-x | 指定 如何 处理 右边 / 左边 边缘 的 内容 溢出 元素 的 内容 区域 区域 | авто скрытый свиток видимый без дисплея без содержания | 2 |
| позиция | 指定 元素 的 定位 类型 | абсолютное фиксированный родственник статический унаследовать | 2 |
| правый | 定义 了 定位 元素 右 外边 距 边界 与其 包含 块 右边 界 之间 的 偏移。 | авто длина % наследовать | 2 |
| верх | 定义 了 一个 定位 元素 的 上 外边 距 边界 与其 包含 块 上 边界 之间 的 偏移。 | авто длина % наследовать | 2 |
| z-индекс | 设置 元素 的 堆叠 顺序 | номер авто унаследовать | 2 |
.
Добавить комментарий