Что такое позиционирование в CSS?
Позиционирование в CSS означает установку позиции элемента на веб-странице.
При позиционировании используется свойство CSS
position
.
Позиционирование в CSS - важная концепция для веб-дизайнеров. Он используется для создания хорошо структурированных веб-страниц с правильным расположением элементов.
Вы заметили фиксированные боковые панели или панели навигации на веб-сайтах?
Они исправляются с помощью позиционирования в CSS.
>position
Свойство имеет значение,
fixed
;
он останавливает движение элемента на веб-странице.
Таким образом вы можете создавать фиксированные панели навигации и боковые панели.
Различные типы позиционирования в CSS
Свойство CSS
position
имеет разные значения, которые обеспечивают разные функции позиционирования в CSS.
Все эти значения имеют особый способ обработки элементов:
- Позиция Статическая
- Позиция фиксированная
- Относительная позиция
- Положение Абсолютное
- Позиция липкая
После установки CSS
position
свойства для элемента, то этот элемент дополнительно может быть установлен с
помощью
top
,
bottom
,
left
,
right
свойства.
Статическая позиция CSS
CSS Position static является значением по умолчанию для элементов html.
static
Позиционируется элемент получает позиционируется в
соответствии с нормальным потоком страницы.
Эти элементы будут отображаться везде, где они закодированы на веб-странице.
CSS Позиция Статические элементы не влияют
top
,
bottom
,
left
,
right
и
z-index
свойства.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Static Position </title>
<meta charset="UTF-8">
<style>
.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>Example of CSS Static Positioning</h2>
<p>An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
Выход
Элемент с position: static; не позиционируется каким-либо особым образом; он всегда позиционируется в соответствии с обычным потоком страницы:
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Static Position </title>
<meta charset="UTF-8">
<style>
.box{
color: #fff;
background: #00c4cc;
padding: 20px;
}
.container{
padding: 50px;
margin: 50px;
position: relative;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.container p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor. </p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi tincidunt. </p>
</div>
</body>
</html>
Выход
Статическая позиционная коробка
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus.
Quis quam ut magna consquat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam в маттисе. Suspendisse Potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Относительная позиция CSS
CSS Position relative используется для установки элемента в соответствии с его нормальным положением.
Предположим, мы применяем
left:50px;
после
position:relative;
, тогда он сдвинет элемент на 50 пикселей влево от его нормального положения.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Relative Position </title>
<meta charset="UTF-8">
<style>
.relative {
position: relative;
left: 50px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>Example of CSS Relative Positioning</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
Выход
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Relative Position </title>
<meta charset="UTF-8">
<style>
.box{
position: relative;
left: 100px;
color: #fff;
background: #7dc765;
padding: 20px;
}
.container{
padding: 50px;
margin: 50px;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.container p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Relative Positioned Box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam a.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt.</p>
</div>
</body>
</html>
Выход
Относительно расположенная коробка
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus.
Quis quam ut magna consquat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam в маттисе. Suspendisse Potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Положение CSS фиксировано
CSS Position fixed зафиксирует элемент в области просмотра. Пример фиксированной позиции - это div в правом нижнем углу этой веб-страницы. Позиционируется как фиксированный; он не будет двигаться даже во время прокрутки.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Fixed Position </title>
<meta charset="UTF-8">
<style>
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>Example of CSS Fixed Positioning</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
Выход
Пример фиксированного позиционирования CSS
Посмотрите на div в правом нижнем углу экрана ur, он расположен как фиксированный. Он не будет двигаться даже во время прокрутки.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Fixed Position </title>
<meta charset="UTF-8">
<style>
.box{
position: fixed;
top: 200px;
left: 100px;
color: #fff;
width: 60%;
background: #f44712;
padding: 20px;
}
.container{
padding: 50px;
margin: 50px;
position: relative;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.container p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Fixed Positioned Box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, luctus dui.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt.</p>
</div>
</body>
</html>
CSS Position Absolute
CSS Position absolute используется для позиционирования элемента относительно его первого нестатического родительского элемента.
top
,
right
,
bottom
, И
left
свойства определяют свою позицию от краев блока ,
содержащего этот элемент.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Absolute Position </title>
<meta charset="UTF-8">
<style>
.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>Example of CSS Absolute Positioning</h2>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Выход
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Absolute Position </title>
<meta charset="UTF-8">
<style>
.box{
position: absolute;
top: 200px;
left: 100px;
color: #fff;
width: 60%;
background: #4cafdf;
padding: 20px;
}
.container{
padding: 50px;
margin: 50px;
position: relative;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.container p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Absolute Positioned Box</h2>
<div><strong>Note:</strong> This box is absolutely positioned relative to the container DIV element.</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a .</p>
</div>
</body>
</html>
Выход
Коробка с абсолютным позиционированием
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. В tincidunt orci сидят amet elementum vestibulum.
Quis quam ut magna consquat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam в маттисе. Suspendisse Potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, Commodo iaculis justo viverra. Etiam vitae est arcu.
Все свойства позиции CSS
Имущество | Ценить | Описание |
---|---|---|
Нижний | авто, длина,%, наследовать | Он используется для установки нижнего поля для элемента. |
левый | авто, длина,%, наследовать | Он используется для установки левого поля для элемента. |
Правильно | авто, длина,%, наследовать | Он используется для установки правого поля для элемента. |
Топ | авто, длина,%, наследовать | Он используется для установки верхнего поля для элемента. |
z-индекс | номер, авто, наследование | Его можно использовать для установки элементов друг над другом, упорядоченных как стек, задавая разные значения z-index. |
зажим | форма, авто, наследование | Он используется для отображения только определенной части элемента, а остальная часть обрезается. |