Относительное позиционирование css – Position (absolute, relative и fixed) — способы позиционирования Html элементов в CSS (правила left, right, top и bottom)

Leave a Comment / Css / By /

Содержание

Блочная верстка с абсолютным и относительным позиционированием

Цель урока: Знакомство с принципами относительного и абсолютного позиционирования блочной верстки css


Абсолютное позиционирование CSS в фиксированном дизайне

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

Таким образом, недостатки верстки с фиксированным абсолютным позиционированием:

  • сложность последующих модификаций дизайна;
  • жесткая привязка к координатной сетке.

Необходимые свойства

    position

  1. Для всех основных слоев устанавливается абсолютное позиционирование:

    2. position: absolute

    width (height)

  2. Для всех слоев необходимо задать ширину (иногда и высоту)

    3. top и left (right)

  3. Необходимо задать координаты слоев по горизонтали и вертикали. Достаточно двух координат, например, расстояние от левого края браузера до левого края слоя — left (иногда легче задать расстояние от правого края — right) и расстояние от верхнего края браузера до слоя — top

Пример: Создать дизайн страницы, изображенной на рис. 1. Выполнить блочную верстку с абсолютным позиционированием слоев


Рис. 1. Пример абсолютного позиционирования слоев в блочной верстке


Выполнение:

1. «Разбиваем» все основные элементы страницы на блоки следующим образом:

  • Отдельные слои для заголовков с id: header1, header2, header3
  • Отдельные слои для основных колонок с контентом: col1, col2, col3
  • Схематично получаем следующее размещение блоков:

<body>
    <div>Евгений Евтушенко</div>
    <div>Валерий Брюсов</div>
    <div>Эдуард Асадов</div>
    <div>
		Мне снится старый друг,<br/>
		который стал врагом,<br/>
		но снится не врагом,<br/>
		а тем же самым другом.<br/>
		Со мною нет его,<br/>
		но он теперь кругом,<br/>
		и голова идет<br/>
		от сновидений кругом.
    </div>
    <div>
	Великое вблизи неуловимо,<br/>
	Лишь издали торжественно оно,<br/>
	Мы все проходим пред великим мимо<br/>
	И видим лишь случайное звено.
	</div>
    <div>
	В любых делах при максимуме сложностей<br/>
	Подход к проблеме все-таки один:<br/>
	Желанье - это множество возможностей,<br/>
	А нежеланье - множество причин.
    </div>
</body>

<body> <div>Евгений Евтушенко</div> <div>Валерий Брюсов</div> <div>Эдуард Асадов</div> <div> Мне снится старый друг,<br/> который стал врагом,<br/> но снится не врагом,<br/> а тем же самым другом.<br/> Со мною нет его,<br/> но он теперь кругом,<br/> и голова идет<br/> от сновидений кругом. </div> <div> Великое вблизи неуловимо,<br/> Лишь издали торжественно оно,<br/> Мы все проходим пред великим мимо<br/> И видим лишь случайное звено. </div> <div> В любых делах при максимуме сложностей<br/> Подход к проблеме все-таки один:<br/> Желанье — это множество возможностей,<br/> А нежеланье — множество причин. </div> </body>

2. Задаем общие свойства для колонок и заголовков, касающиеся оформления шрифта, ширины, границ и внутренних отступов:

#header1, #header2, #header3, #col1, #col2, #col3 { 
    width: 250px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
    font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
}

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ border: 1px solid black; /* Рамка вокруг слоя */ padding: 5px; /* Поля вокруг текста */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

3. Добавляем для тех же селекторов свойства абсолютного позиционирования:

...
    position: absolute; /* Абсолютное позиционируем */
    top: 30px; /* Расстояние от верхнего края */
...

… position: absolute; /* Абсолютное позиционируем */ top: 30px; /* Расстояние от верхнего края */ …

4. Отдельно создаем свойства для колонок. Для позиционирования устанавливаем расстояние от верха (top):

#col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
    top: 60px; /* Расстояние от верхнего края */
}

#col1, #col2, #col3 { font-family: «Times New Roman», Times, serif; /* Шрифт с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ top: 60px; /* Расстояние от верхнего края */ }

5. Для каждого слоя необходимо отдельно задать координату расстояния от левого края (left):

   #header1 { left: 20px; }
   #header2 { left: 280px; } /* 20 + 250 + 5 + 5 */
   #header3 { left: 540px; } /* 20 + 250 + 250 + 5 + 5 + 5 + 5 */
   #col1 { left: 20px; }
   #col2 { left: 280px; }
   #col3 { left: 540px; }

#header1 { left: 20px; } #header2 { left: 280px; } /* 20 + 250 + 5 + 5 */ #header3 { left: 540px; } /* 20 + 250 + 250 + 5 + 5 + 5 + 5 */ #col1 { left: 20px; } #col2 { left: 280px; } #col3 { left: 540px; }

6. Для каждого слоя отдельно задаем фон:

   #header1 { background: #B38541; }
   #header2 { background: #008159; }
   #header3 { background: #006077; }
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }

#header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

Резюме по абсолютному позиционированию

Самыми главными свойствами, необходимыми для абсолютного позиционирования слоев являются:

1. Ширина всех слоев — свойство width:

  • для всех слоев width: 250px;

2. Установка абсолютного позиционирования для всех слоев:

  • для всех слоев position: absolute;

3. Установка двух координат (одной — по вертикали, другой — по горизонтали) для каждого слоя:

  • Координаты по вертикали (от верхнего края) для всех слоев заголовков header: top: 30px
    ;
  • Координаты по вертикали (от верхнего края) для всех слоев колонок col: top: 60px;
  • Координаты по горизонтали (от левого края) для всех слоев заголовков:
    • #header1{ left: 20px; }
    • #header2{ left: 280px; } (20 + 250 + 5 + 5)
    • #header3{ left: 540px; } (20 + 250 + 250 + 5 + 5 + 5 + 5)

Весь код стиля будет выглядеть следующим образом:

/* для колонок и их заголовков */
#header1, #header2, #header3, #col1, #col2, #col3 { 
    font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
    width: 250px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
	/* позиционируем */
    position: absolute; /* Абсолютное позиционируем */
    top: 30px; /* Расстояние от верхнего края */
}
   /* для колонок */
#col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
    top: 60px; /* Расстояние от верхнего края */
} 
 
   /* Расстояние от левого края отдельно каждого слоя */
   #header1 { left: 20px; }
   #header2 { left: 280px; } /* 20 + 250 + 5 + 5 */
   #header3 { left: 540px; } /* 20 + 250 + 250 + 5 + 5 + 5 + 5 */
   #col1 { left: 20px; }
   #col2 { left: 280px; }
   #col3 { left: 540px; }
 
   /* Цвет фона каждого слоя */
   #header1 { background: #B38541; }
   #header2 { background: #008159; }
   #header3 { background: #006077; }
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }

/* для колонок и их заголовков */ #header1, #header2, #header3, #col1, #col2, #col3 { font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ width: 250px; /* Ширина колонок */ border: 1px solid black; /* Рамка вокруг слоя */ padding: 5px; /* Поля вокруг текста */ /* позиционируем */ position: absolute; /* Абсолютное позиционируем */ top: 30px; /* Расстояние от верхнего края */ } /* для колонок */ #col1, #col2, #col3 { font-family: «Times New Roman», Times, serif; /* Шрифт с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ top: 60px; /* Расстояние от верхнего края */ } /* Расстояние от левого края отдельно каждого слоя */ #header1 { left: 20px; } #header2 { left: 280px; } /* 20 + 250 + 5 + 5 */ #header3 { left: 540px; } /* 20 + 250 + 250 + 5 + 5 + 5 + 5 */ #col1 { left: 20px; } #col2 { left: 280px; } #col3 { left: 540px; } /* Цвет фона каждого слоя */ #header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

В результате получаем веб-страницу, как на рис. 1 задания.

Относительное позиционирование CSS в фиксированном дизайне

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

Необходимые свойства

Для двух колонок

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

<div>
    <div>
	колонка 1
    </div>
    <div>
	колонка 2	
    </div>
</div>

<div> <div> колонка 1 </div> <div> колонка 2 </div> </div>

Тогда необходимы следующие свойства:

width

Ширина задается как контейнеру, так и обеим колонкам. Для контейнера она рассчитывается как сумма ширины двух колонок (при отсутствии иных отступов).

.container{
	width:700px;
}

.container{ width:700px; }

Ширина колонок может быть любой, с учетом что сумма обоих показателей вместе с другими отступами не превысит ширину контейнера. Для того чтобы расположить колонки плотно друг другу сумма их ширины должна соответствовать ширине контейнера (конечно, нужно учесть и другие отступы, включая padding)

#col1, #col2{
        border: 1px solid black; /* Рамка вокруг слоя */
	padding: 5px; /* Поля вокруг текста */
	width: 338px; /* Ширина колонок */
}

#col1, #col2{ border: 1px solid black; /* Рамка вокруг слоя */ padding: 5px; /* Поля вокруг текста */ width: 338px; /* Ширина колонок */ }

В данном примере ширина колонок рассчитана, как ширина контейнера 700px - внутренние отступы padding 5+5+5+5px - ширина рамки 1+1+1+1 px = 676px на обе колонки. Для одной колонки получаем ширину 338px. (На рамку на самом деле при заданном 1px отводится 0.8px, поэтому чтобы расположить колонки стык в стык, лучше задать ширину 338.5px)

float

Для расположения колонок рядом друг с другом, необходимо удалить у них блочность. Для этого левую колонку располагаем слева, и правую, если колонки идут стык в стык, тоже слева. если между колонками предусмотрен зазор, то правую колонку следует расположить справа.

#col1 {float:left}
#col2 {float:left}

#col1 {float:left} #col2 {float:left}

Результат:

Рис. 2. Две колонки рядом при относительном позиционировании


Рис. 3. Две колонки с зазором при относительном позиционировании

margin-left и margin-right

Для того, чтобы расположить колонки по центру, необходимо отцентрировать сам контейнер:

.container{
        margin-left:auto; 
	margin-right:auto;
	width:700px;
}

.container{ margin-left:auto; margin-right:auto; width:700px; }

Весь код стилей:

.container{
	margin-left:auto; 
	margin-right:auto; 
	width:700px;
}
/* Общее для колонок */
#col1, #col2{ 
    width: 335px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
} 
/* Отдельно для колонок */
   #col1 {float:left }
   #col2 {float:right }
/* Цвет фона каждого слоя */
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }

.container{ margin-left:auto; margin-right:auto; width:700px; } /* Общее для колонок */ #col1, #col2{ width: 335px; /* Ширина колонок */ border: 1px solid black; /* Рамка вокруг слоя */ padding: 5px; /* Поля вокруг текста */ } /* Отдельно для колонок */ #col1 {float:left } #col2 {float:right } /* Цвет фона каждого слоя */ #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; }

Для трех колонок

Расположить три колонки рядом не получится, произойдет смещение. Поэтому необходимо два слоя также оставить в контейнере:

Рис. 4. Три колонки при относительном позиционировании

<div>
    <div>
		Колонка 1
	</div>
    <div>
		Колонка 2
    </div>
</div>
    <div>
		Колонка 3
    </div>

<div> <div> Колонка 1 </div> <div> Колонка 2 </div> </div> <div> Колонка 3 </div>

position

Для контейнера можно установить абсолютное позиционирование, а для третьей колонки — относительное позиционирование CSS. Для двух других колонок — в зависимости от макета и взаиморасположения слоев.

   .container{
	position:absolute; 
}
   #col1 {position: absolute}
   #col2 {position: relative}
   #col3 {position: relative}

.container{ position:absolute; } #col1 {position: absolute} #col2 {position: relative} #col3 {position: relative}

width

Необходимо задать ширину для всех трех колонок. Для контейнера ширина не нужна.

#col1, #col2, #col3 { 
    width: 200px;
}

#col1, #col2, #col3 { width: 200px; }

left

Для второй третьей колонок необходимо задать расстояние от левого края браузера или контейнера:

   #col2 {
		position: relative;
		left:205px;
   }
   #col3 {
		position: relative;
		left: 410px;
   }

#col2 { position: relative; left:205px; } #col3 { position: relative; left: 410px; }

Весь код стилей:

  .container{
	position:absolute; 
}
/* Общее для колонок */
#col1, #col2, #col3 { 
    width: 200px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
} 
/* Отдельно для колонок */
   #col1 {position: absolute}
   #col2 {
		position: relative;
		left:205px;
   }
   #col3 {
		position: relative;
		left: 410px;
   }
/* Цвет фона каждого слоя */
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }

.container{ position:absolute; } /* Общее для колонок */ #col1, #col2, #col3 { width: 200px; /* Ширина колонок */ border: 1px solid black; /* Рамка вокруг слоя */ padding: 5px; /* Поля вокруг текста */ } /* Отдельно для колонок */ #col1 {position: absolute} #col2 { position: relative; left:205px; } #col3 { position: relative; left: 410px; } /* Цвет фона каждого слоя */ #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

Результат:

Рис. 5. Три колонки при относительном позиционировании

Как работает позиционирование в CSS?

  • Главная
  • ->
  • Материалы
  • ->
  • Как работает позиционирование в CSS?

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед


Как работает позиционирование в CSS?

Исходники

Пример

Несомненно, свойство position — один из наиболее мощных инструментов, которым обладают веб-разработчики и дизайнеры. Однако есть в этом свойстве некоторые моменты, которые могут поставить новичков в тупик.

Итак, что же такое позиционирование?

Когда Ваш браузер открывает страницу, он начинает так называемую отрисовку (рендеринг) элементов веб-страницы (блоки div, параграфы, заголовки и т.п.) в том порядке, в котором они появляются в разметке HTML-страницы.

Позиционирование предназначено для того, чтобы упорядочить процесс отображения элементов на странице. Существует 4 типа позиционирования и свойство inherit, предназначенное для обозначения того, что элемент должен наследовать значение родительского элемента:

1. static
2. relative
3. absolute
4. fixed
5. inherit

По умолчанию элементы имеют позиционирование static

По умолчанию ко всем элементам страницы браузер применяет позиционирование static. Такое позиционирование означает, что каждый элемент располагается соответственно естественному порядку — порядку добавления его на страницу.

Блочные элементы располагаются под блочными элементами, строчные элементы располагаются непосредственно друг за другом.

В чем основное отличие между блочными и строчными элементами?

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

Блочные элементы (block), в отличие от строчных, в общем потоке страницы располагаются один под другим, по одному в каждой строке.

Относительное позиционирование

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

Данный подход удобно использовать, если нужно сместить элемент, но при этом не привязывать его к жестко заданной позиции на странице. 


.relativeDiv{

/*сдвигаем блок вверх-влево относительно его нормальной позиции:*/

position:relative;
top:-50px;
left:-100px;
}

Фиксированное позиционирование

При использовании position: fixed расположение элемента рассчитывается относительно окна браузера. Это позволяет, например, отображать какие-нибудь панели, навигационные меню и т.п. всегда в одном и том же месте экрана, в не зависимости от использования прокрутки в браузере. Для позиционирования элемента в этом случае точно также используются свойства top, right, bottom и left. 


.fixedDiv{

/*Фиксируем блок div в 20 пикселях от нижней части окна браузера*/

position:fixed;
right:20px;
bottom:20px;
}

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

Если элемент абсолютно позиционирован, то другие элементы при этом отображаются на веб-странице так, как будто абсолютно позиционированного элемента и нет.

Положение элемента задается уже описанными выше свойствами left, top, right и bottom. Кроме того, на его положение влияет значение свойства position родительского элемента.

Так, если у родителя значение position установлено как static, либо родителя нет, то отсчет координат ведется от края окна браузера.

Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента. 


.parentDiv{

/* аналогичный эффект будет также при
position: fixed; и position: absolute;*/

position:relative;
}
.absoluteDiv{

/*Позиционируем absoluteDiv относительно родительского parentDiv*/

position:absolute;
right:50px;
top:90px;
}

Используя свойства позиционирования, можно создать любые шаблоны страниц. В сочетании со свойством z-index Вы можете обойти обычное поведение при отображении элементов (по умолчанию элементы, идущие в коде позже, отображаются поверх элементов, шедших ранее).

По материалам tutorialzine.com
Перевод — Дмитрий Науменко

P.S. Хотите разобраться с CSS и научиться верстать? Посмотрите еще серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

Наверх

5 особенностей позиционирования в CSS

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

В этой статье мы внимательно рассмотрим некоторые малоизвестные вещи, касающиеся CSS-позиционирования.

Перед тем как начать, давайте кратко вспомним основы различных типов позиционирования.

Обзор доступных способов позиционирования

Свойство CSS position определяет тип позиционирования элемента.

Опции для позиционирования

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

Для этого надо свойству position задать одно из следующих значений:

  • relative
  • absolute
  • fixed
  • sticky

И только после задания позиционирования, можно использовать свойства, смещающие элемент:

  • top
  • right
  • bottom
  • left
  • Начальное значение этих свойств — ключевое слово auto.

Надо учитывать, что если у элемента задано свойство position в значении absolute или fixed, то он является абсолютно позиционированным элементом. Также у позиционированных элементов начинает работать свойство z-index, определяющее порядок наложения.

Различия между основными способами позиционирования

Теперь быстро рассмотрим три базовых различия между доступными типами позиционирования:

  • абсолютно (absolute) позиционированные элементы полностью удаляются из потока, их место занимают ближайшие соседи.
  • относительно позиционированные (relative) и приклеенные (sticky) сохраняют свое место в потоке и их ближайшие соседи не занимают его. Однако отступы этих элементов не занимают пространство, а полностью игнорируются другими элементами и это может повлечь наложение элементов.
  • фиксированные (fixed) элементы (а фиксированное позиционирование есть разновидность абсолютного) всегда позиционируются относительно зоны видимости (игнорируя наличие позиционирования у предков), в то время как приклеенные элементы позиционируются относительно ближайшего предка со скроллингом (overflow:auto). И только при отсутствии таких предков они позиционируются относительно зоны видимости.

Подробнее это можно рассмотреть в демо:

See the Pen Overview of the available positioning types by George (@georgemarts) on CodePen.

Примечание: позиционирование “приклеенных элементов” до сих пор является экспериментальной технологией с ограниченной поддержкой в браузерах. Конечно, при желании вы можете использовать полифилл, чтобы добавить этот функционал в браузер, но с учетом малой распространенности это свойство в статье обсуждаться не будет.

Позиционирование элементов с абсолютным типом позиционирования

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

Поэтому я решил начать с него при описании малоизвестные особенностей позиционирования.

Итак, абсолютно позиционированный элемент смещается относительно своего ближайшего спозиционированного предка. Конечно, это работает, если у кого-либо из предков position отличается от static — если у элемента нет спозиционированных предков, он смещается относительно зоны видимости.

Это демонстрируется следующим примером:

See the Pen Little-known thing #1 — Positioning elements with absolute positioning type by George (@georgemarts) on CodePen.

В этом демо зеленый блок изначально спозиционирован абсолютно с нулевыми отступами bottom:0 и left:0, его предку (красному блоку) позиционирование не задавалось вообще.

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

Абсолютно позиционированные элементы игнорируют свойство float

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

Взгляните на соответствующее демо:

See the Pen Little-known thing #2 — The absolutely positioned elements ignore the «float» property by George (@georgemarts) on CodePen.

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

Абсолютно позиционированные строчные элементы становятся блочными

Строчный элемент с абсолютным или фиксированным позиционированием приобретает свойства блочного элемента. Подробнее конвертация строчных элементов в блочные описана в таблице.

А вот пример:

See the Pen Little-known thing #3 — The inline elements which are absolutely positioned behave as block-level elements by George (@georgemarts) on CodePen.

В данном случае мы создали два разных элемента. Первый (зеленый блок) это блочный элемент, а второй (красный блок) — строчный. Изначально виден только зеленый блок.

Красный блок не виден потому, что заданные ему свойства width и height работают только с блочными и строчно-блочными элементами, а так как в нем нет контента, у него нет никаких размеров.

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

У абсолютно позиционированных элементов нет схлопывания внешних отступов

По умолчанию, когда у два вертикальных внешних отступа соприкасаются, они объединяются в один, равный максимальному из них. Это называется схлопывание внешних отступов.

Поведение абсолютно позиционированных элементов здесь схоже с плавающими элементами — их отступы не объединяются с соседними.

Вот пример:

See the Pen Little-known thing #4 — The margins don’t collapse on absolutely positioned elements by George (@georgemarts) on CodePen.

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

Но как мы можем предотвратить схлопывание отступов? Нам нужно поместить между ними какой-либо разделитель.

Это может быть внутренний отступ (padding) или граница (border), их можно применять как к родительскому, так и к дочернему элементу. Другой вариант — добавить клирфикс к родительскому элементу.

Позиционирование элементов с пикселями и процентами

Использовали ли вы когда-либо проценты вместо пикселей для позиционирования элементов? Если ответ да, то вы знаете, что смещение элемента зависит от выбранных единиц исчисления (пикселей или процентов).

Это немного смущает, правда? Итак, сначала посмотрим, что говорит спецификация об смещении в процентах:

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

Как было сказано, при задании смещения в процентах, позиция элемента зависит от ширины и высоты его родителя.

Демо показывает эту разницу:

See the Pen Little-known thing #5 — The difference between positioning elements with pixels and percentages by George (@georgemarts) on CodePen.

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

А если мы выберем проценты для смещения, результат будет зависеть от размеров родительского элемента. Вот визуализация показывающая, как рассчитывается новая позиция:

Примечание: как вы, наверное, знаете, свойство transform (вместе с различными функциями translate) также позволяет изменить позицию элемента. Но в этом случае при использовании процентов расчет будет происходить на основе размер самого элемента, а не его родителя.

Заключение

Я надеюсь, что эта статья помогла вам лучше понять позиционирование в CSS и разъяснила основные сложности.

Урок 11. Относительное позиционирование

Для относительного позиционирования блока нам понадобиться свойство position:relative и свойства смещения. Смещение будет происходить относительно самого блока, а не родительского элемента. Давайте рассмотрим пример:

 


 <html>

   <head>
     <title>Относительное позиционирование</title>
     <link rel=»stylesheet» type=»text/css» href=»/style.css»>
   </head>

   <body>
     <div>Блок 1</div>
     <div>Блок 2</div>
     <div>Блок 3</div>
   </body>

 </html>

Зададим размеры и границы этих блоков:


#blok1, #blok2, #blok3 {
  border:1px solid red;
  width:150px;
  height:50px;
}
    

Результат:

Давайте изменим положение второго блока:


#blok1, #blok2, #blok3 {
  border:1px solid red;
  width:150px;
  height:50px;
}
#blok2{
  position:relative;
  left:50px;
  top:25px;
}
    

Смотрим в браузере:

Второй блок сместился вправо и вниз. Остальные блоки остались на своих местах.

Плавающие блоки:

Плавающие блоки определяются свойством float, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта:

left — блок прижимается к левому краю, остальные элементы обтекают его с правой стороны

right — блок прижимается к правому краю, остальные элементы обтекают его с левой стороны

none — блок не перемещается и позиционируется согласно свойству position

Думаю лучше будет понятно на примере:

 


 <html>

   <head>
     <title>Позиционирование блоков</title>
     <link rel=»stylesheet» type=»text/css» href=»/style.css»>
   </head>

   <body>
     <div>Текст блока 1</div>
     Просто какие-то элементы на странице. Это может быть просто
     текст, ссылки, списки, картинки и т.д.     
   </body>

 </html>

В style.css вписываем:

#blok1{
  border:1px solid red;
  width:150px;
  height:50px;
}    

Смотрим:

Теперь сделаем наш блок плавающим:

#blok1{
  border:1px solid red;
  width:150px;
  height:50px;
  float:left;
}   

Смотрим:

Переместим блок в правый край:

#blok1{
  border:1px solid red;
  width:150px;
  height:50px;
  float:right;
}   

Смотрим:

Теперь давайте рассмотрим несколько плавающих блоков на одной странице:

      <html>

 

   <head>
     <title>Позиционирование блоков</title>
     <link rel=»stylesheet» type=»text/css» href=»/style.css»>
   </head>

   <body>
     <div>Текст блока 1</div>
     <div>Текст блока 2</div>
     Просто какие-то элементы на странице. Это может быть просто
     текст, ссылки, списки, картинки и т.д.
   </body>

</html>   

 

Зададим блокам разные значения свойства float:

#blok1{
  border:1px solid red;
  width:150px;
  height:50px;
  float:left;
}
#blok2{
  border:1px solid red;
  width:150px;
  height:50px;
  float:right;
}    

Смотрим:

Давайте поставим им одинаковые значения:

#blok1{
  border:1px solid red;
  width:150px;
  height:50px;
  float:left;
}
#blok2{
  border:1px solid red;
  width:150px;
  height:50px;
  float:left;
}   

Мы видим, что второй блок становится правее первого, аналогичная ситуация будет и значениям right.

#blok1{
  border:1px solid red;
  width:150px;
  height:50px;
  float:right;
}
#blok2{
  border:1px solid red;
  width:150px;
  height:50px;
  float:right;
}

 

Представим, что нам нужно, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. В этом нам поможет свойство clear, оно определяет, какие стороны плавающего блока не могут соседствовать. Можно задать четыре значения:

left — блок должен располагаться ниже всех левосторонних блоков
right — блок должен располагаться ниже всех правосторонних блоков
both — блок должен располагаться ниже всех плавающих блоков
none — никаких ограничений нет, это значение по умолчанию

Давайте зададим clear для второго блока:

#blok1{
  border:1px solid red;
  width:150px;
  height:50px;
  float:right;
}
#blok2{
  border:1px solid red;
  width:150px;
  height:50px;
  float:right;
  clear:right;
} 

В предыдущем уроке, мы верстали страницу с помощью абсолютного позиционирования:

Давайте сверстаем ее с помощью плавающих блоков:

 

<html>

   <head>
     <title>Позиционирование блоков</title>
     <link rel=»stylesheet» type=»text/css» href=»/style.css»>
   </head>

   <body>
     <div>шапка сайта</div>
     <div>меню</div>
     <div>
       контент
       <div>блок новостей</div>
     </div>
     <div>низ сайта</div>
   </body>

 </html>    

 

В style.css зададим:

#header{
  background:darkred;
  width:715px;
  height:100px;
}
#menu{
  background:oldlace;
  width:190px;
  height:300px;
  float:left;
}
#content{
  background:oldlace;
  width:525px;
  height:300px;
  float:left;
}
#footer{
  background:darkred;
  width:715px;
  height:30px;
}
#news{
  background:yellow;
  width:150px;
  height:280px;
  float:right;
}   

Смотрим:

Видно, что наш блок новостей располагается ниже текста в блоке content. Это произошло потому, что блок news в html-коде ниже текста. Чтобы исправить, надо переместить div=»news» выше текста (т.е. до слова «контент»):

 

<html>

   <head>
     <title>Позиционирование блоков</title>
     <link rel=»stylesheet» type=»text/css» href=»/style.css»>
   </head>

   <body>
     <div>шапка сайта</div>
     <div>меню</div>
     <div>
       <div>блок новостей</div>
       контент
     </div>
     <div>низ сайта</div>
   </body>

</html>

 

Проверяем:

Чтобы блок не прижимался к верхнему и правому краям, добавим для блока значение margin:

#news{
  background:yellow;
  width:150px;
  height:280px;
  float:right;
  margin:10px;
}    

Проверяем:

С помощью плавающих блоков верстать страницу проще и не надо рассчитывать положение блока, да и код короче. Для»резиновой» верстки мы и не можем указать точное расположение блока, а с помощью плавающих блоков нам нужно указать лишь ориентир.

Фиксированные блоки

При фиксированном позиционировании блок фиксируется относительно области просмотра. Internet Explorer не поддерживают фиксированные блоки, поэтому использовать их пока не следует. Пример:

#blok{
  position:fixed;
  left:0px;
  top:0px;
}

Блок будет при прокрутке страницы оставаться на месте.

 

Что такое позиционирование элементов в css, уроки, примеры

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

Итак, для начала давайте разберем что это такое. Свойство position позволяет управлять расположением элементов на сайте относительно границ экрана, а также относительно других элементов на сайте.  Всего есть 6 вариантов использования этого свойства и каждое мы рассмотрим по очереди.

Данная статья будет рассчитана в первую очередь для новичков, которые только начинают изучать данное свойство, и будет иметь подробно описанные примеры и исходный код, чтобы вы могли скопировать и протестировать описанный пример самостоятельно.

Выравниваем элементы относительно экрана

Данное свойство указывает элементы, что он является абсолютно позиционированным и его расположение будет зависеть либо от границ экрана, либо от границ родительского элемента. При этом, остальные элементы и блоки на странице будут выстраиваться так, как будто данного блока на сайте вовсе нет.

Для наглядности того, как работает абсолютное позиционирование в css, создадим несколько блоков разного цвета.

Что мы видим? Три разноцветный блок, расположены друг под другом.

Теперь зададим первому блоку параметр position:absolute. Обновляем страницу и видим, что второй блок пропал.

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

Ну хорошо, но почему тогда пропал именно второй блок, ведь позиционирование мы задали первому блоку? Все дело в том, что все элементы на сайте могут накладываться друг на друга слоями, благодаря такому замечательному свойству как z-index. Он нем скоро будет написана интересная статья, в которой вы сможете также подробно ознакомиться с этим свойством.

Как вы думаете, что будет с элементами, если position absolute задать второму блоку? Какие блоки будут видны? Если ваш ответ первый или третий, то вы не угадали. На странице будет виден только второй блок. Можете проверить сами, создав такую же страницу, либо скачав исходники в конце поста.

Обратите внимание, что не видно один из трех, приведенных выше блоков, только в том случае, если они одинакового размера. Если же все блоки будут разного размера, то они могут быть видны за другими.

Положение позиционированного элемента в css можно задавать с помощью свойств:

  • Left – задает расстояние слева от края родительского блока или от левого края экрана.
  • Right – задает расстояние справа от края родительского блока или от правого края экрана.
  • Top – задает расстояние сверху от края родительского блока или от верхнего края экрана.
  • Bottom – задает расстояние снизу от края родительского блока или от нижнего края экрана.

Задаваться эти свойства могут как в пикселях, так и в процентах.

Скрываем блоки с сайта

Довольно простой способ скрыть ненужный контент с сайта, но при этом способ может быть негативно воспринят поисковыми системами, так как фактически информация будет просто скрыта от пользователя, но при этом не убрана с самого сайта.

Так вот, для того, чтобы убрать ненужный блок из видимой области на сайте, задайте ему стиль:

.class{
position:absolute;
left:-9999px;
}

Также вместо left: -9999px, можно задать top: -999px. В первом случае блок уйдет за левую сторону сайта, а во втором – улетит далеко вверх.

Выравниваем позиционированный блок по центру

Я думаю, вы уже могли заметить, что выровнять блок, имеющий абсолютное позиционирование через стандартный margin:0 auto не получится. Но как тогда можно осуществить выравнивание по центру?

.one {
  position:absolute;
  left:0;
  right:0;
  width:300px;
  margin:0 auto
}

Что у нас получается? Мы задали блоку one фиксированную ширину в 300 пикселей, затем указали ему что он одновременно должен быть прижат к левому краю экрана и к правому. А уже затем использовали выравнивание по центру с помощью margin: 0 auto;

Вот так блок выбудет выглядеть на экране:

Позиционирование относительно других элементов

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

Для наглядности примера давайте зададим цвета новому элементу, а также тегу body. Сделаем максимальную ширину блока parent в 1000px и выровняем его по центру экрана.


body{
  padding:0;
  margin:0;
  background:#333;
  line-height:0
}

.parent{
   background:#dedede;
   width:100%;
   max-width:1000px;
  margin:0 auto 
}
И немного изменим блок one.
.one{
  position:absolute;
  right:0;
  text-align:center;
  width:300px;
  bottom:0 
}
Что мы видим?
Цвет нашего сайта стал черным, цвет родительского блока серым, а розовый блок у нас уехал вниз и вправо. Все верно, ведь пока еще данный блок выравнивается относительно экрана. А вот для того, чтобы он встал по в нижний угол родительского блока, а в нашем случае это блок parent, мы должны задать родителю position:relative.
.parent{
  background:#dedede;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  position:relative
}
Сохраняем, обновляем страницу и видим, что блок номер 1 переместился как раз в то место, куда мы и хотели.
Обратите ваше внимание на то, что данный метод работает только если задано абсолютное позиционирование. В случае, если розовому блоку будет задан position:fixed или relative, результат будет другой.
Фиксируем положение элементов при прокрутке сайта
Данное свойство позволяет привязывать элемент к определенному месту на экране. Причем сам элемент продолжает оставаться на своем месте, даже при прокрутке экрана. Довольно часто, fixed используется для фиксированного меню на сайте. Как и absolute fixed позволяет задавать положение по всем 4 сторонам монитора. Для примера, давайте создадим четвертый блок.
Теперь сделаем фиксированную привязку четырех блоков по краям нашего экрана.


.one{
  position:fixed;
  left:0;
  top:35%;
}
.two{
  position:fixed;
  top:0;
  left:35%;
}
.three{
  position:fixed;
  right:0;
  top:35%;
}
.four{
  position:fixed;
  bottom:0;
  left:35%;
}
Что мы видим? Все блоки встали верно, каждый выровнен относительно экрана по своей стороне. Теперь эти блоки так и будут находиться на экране, независимо от того, будем ли прокручивать экран вниз или нет. Обратите внимание, что блока parent на экране мы не видим, хотя в стилях он остался. Пропал с экрана он из-за того, что fixed блоки не учитываются в формировании высоты и ширины родительского блока. А так как внутри parent больше нет других элементов, его ширина и высота ровняются 0.
Не забывайте, что у фиксированного блока нельзя задать родительский блок, поэтому выровнять position fixed относительно родительского блока с помощью css нельзя.
В одной из статей я расскажу вам как создать фиксированное меню для сайта и выложу его исходники, чтобы вам было удобнее учиться. А пока давайте перейдем к следующему примеру.
«Position relative» – зачем вообще это нужно?
Данное свойство позволяет располагать элемент относительно других элементов, но работает он не так, как absolute. Если при формировании абсолютного и фиксированного позиционирования размеры элемента в формировании сайта не учитывались, то с relative им приходится считаться. Давайте рассмотрим пример.
Возьмем созданные нами ранее 4 блока и расположим их рядом друг с другом.
.one{
  float:left;
}
.two{
  float:left;
}
.three{
  float:left;
}
.four{
  float:left;
}
.clr{
  clear:both;
}
Блоки выстроились рядом друг с другом. Зачем я создал новый блок clr? Читайте об этом здесь. Теперь давайте зададим первому блоку position relative и попробуем его сместить его право и вниз.
.one{
    float:left;
    position:relative;
    top:20px;
    left:40px;
}
Розовый блок опустился вниз и отодвинулся чуть вправо, но при этом, остальные блоки остались на месте.
Таким образом, вы можете смещать элементы относительно друг друга так как вам нужно. А еще у позиционирования есть интересное свойство z-index, которое позволяет накладывать элементы друг на друга. Давайте зададим второму и четвертому блоку z-index:10 и посмотрим, что получится.
Первый блок оказался снизу второго и четвертого. Получается, что данное свойство позволяет управлять элементами и выводить определенные на первое место, а другие, наоборот, прятать.
Ну и напоследок осталось рассмотреть заключительные 2 свойства. Они довольно простые, поэтому рассматривать с примерами их не будем.
Position inherit – задает выбранному элементу точно такое же позиционирование, как у его родителя, т.е. фактически копирует его.
Position static – задается всем элементам на карте автоматически, если не задано иное. При этом, static не позволяет нам менять положение с помощью top, bottom, right и left.
На этом мы заканчиваем свой урок. Если будут вопросы – обязательно задавайте их в комментариях.
скачать исходники
 Loading Likes…
  • Facebook
  • Twitter
  • Вконтакте
  • Одноклассники
МАТЕРИАЛЫ ПО ТЕМЕ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *