Что такое позиционирование в 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>

Выход

CSS Static Position

Элемент с position: static; не позиционируется каким-либо особым образом; он всегда позиционируется в соответствии с обычным потоком страницы:

Этот элемент div имеет 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>

Выход

CSS Static Position

Статическая позиционная коробка

Примечание. Это поле статично и установлено по умолчанию. Он всегда располагается в соответствии с обычным потоком страницы.

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>

Выход

CSS Relative Position

Этот элемент div имеет position: relative;

Пример

<!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>

Выход

CSS Relative Position

Относительно расположенная коробка

Примечание . Левый край этого блока DIV смещен вправо на 100 пикселей от исходного положения. Созданный пробел сохраняется.

Положение 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 Fixed Position

Пример фиксированного позиционирования CSS

Посмотрите на div в правом нижнем углу экрана ur, он расположен как фиксированный. Он не будет двигаться даже во время прокрутки.

Этот элемент div имеет position: fixed;

Пример

<!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>

Выход

CSS Absolute Position

Этот элемент div имеет position: relative;

Этот элемент div имеет position: absolute;

Пример

<!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>

Выход

CSS Absolute Position

Коробка с абсолютным позиционированием

Примечание: это поле абсолютно позиционировано относительно элемента DIV контейнера. Прокручивается вместе со страницей.

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.

Все свойства позиции CSS

Имущество	Ценить	Описание
Нижний	авто, длина,%, наследовать	Он используется для установки нижнего поля для элемента.
левый	авто, длина,%, наследовать	Он используется для установки левого поля для элемента.
Правильно	авто, длина,%, наследовать	Он используется для установки правого поля для элемента.
Топ	авто, длина,%, наследовать	Он используется для установки верхнего поля для элемента.
z-индекс	номер, авто, наследование	Его можно использовать для установки элементов друг над другом, упорядоченных как стек, задавая разные значения z-index.
зажим	форма, авто, наследование	Он используется для отображения только определенной части элемента, а остальная часть обрезается.

CSS

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

Различные типы позиционирования в CSS

Статическая позиция CSS

Выход

Выход

Статическая позиционная коробка

Относительная позиция CSS

Выход

Выход

Относительно расположенная коробка

Положение CSS фиксировано

Выход

Пример фиксированного позиционирования CSS

CSS Position Absolute

Выход

Выход

Коробка с абсолютным позиционированием

Все свойства позиции CSS

Подпишитесь на нашу email рассылку 👇