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

Давайте начнем!

CSS position свойство

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

Ниже приведены возможные значения свойства position:

статический

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

Применение свойств top, right, bottom или left к статически расположенному элементу не будет иметь никакого эффекта. z-index также не распространяется на статические элементы.

Синтаксис:

position: static;

Например:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: static;
}
.box3 {
  background-color: green;
}

Выход:

В приведенном выше примере у нас есть 3 ящика одинаковой высоты и ширины. Свойство position: static; применяется только ко второму блоку. Однако он не отличается макетом второго поля от двух других полей, потому что static является значением по умолчанию для всех элементов HTML.

родственник

С position: relative элементы следуют своему обычному потоку документов, но могут быть смещены из исходного положения. Этого можно добиться с помощью свойств top, right, bottom и left.

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

Синтаксис:

position: relative;

Например:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: relative;
  top: 20px;
  left: 50px;
}
.box3 {
  background-color: green;
}

Выход:

В приведенном выше примере второе поле сдвинуто на 20 пикселей вниз (с помощью свойства top) и на 50 пикселей вправо (с помощью свойства left). Смещенный блок не влияет на положение окружающих элементов (блок 1 и блок 3).

абсолютный

Элементы с position: absolute не соответствуют нормальному потоку документа. Элемент позиционируется относительно своего предка, расположенного в чулане (элемент с относительным, абсолютным, фиксированным или липким позиционированием).

Синтаксис:

position: absolute;

Например:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="container">
      <div class="box box2">Box2</div>
    </div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.container {
  border: 3px solid black;
  height: 200px;
  width: 200px;
  position: relative;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: absolute;
  top: 30px;
  left: 50px;
}
.box3 {
  background-color: green;
}

Выход:

В приведенном выше примере вторая коробка находится внутри контейнера. Положение контейнера задается относительным, а положение второго блока — абсолютным, а блок смещается на 30 пикселей вниз (с помощью свойства top) и на 50 пикселей вправо (с помощью свойства left). Контейнер является предком второго блока.

Что делать, если предка нет?

Затем элемент будет позиционироваться относительно области просмотра.

Например:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: absolute;
  top: 30px;
  left: 50px;
}
.box3 {
  background-color: green;
}

Выход:

зафиксированный

С position: fixed элементы позиционируются относительно области просмотра и остаются неподвижными даже при прокрутке страницы.

Синтаксис:

position: fixed;

Например:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
  border: 1px solid black;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: fixed;
  top: 50px;
  left: 50px;
}
.box3 {
  background-color: green;
}

Выход:

В приведенном выше примере положение второго поля будет фиксированным, даже если вы прокрутите страницу вниз.

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

липкий

С position: sticky элементы позиционируются на основе позиции прокрутки пользователя. Он ведет себя как относительный элемент, пока пользователь не прокрутит до определенной позиции, после чего он становится фиксированным относительно содержащего его элемента или окна просмотра.

Синтаксис:

position: sticky;

Например:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS position property</title>
  </head>
  <body>
    <div class="box box1">Box1</div>
    <div class="box box2">Box2</div>
    <div class="box box3">Box3</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: white;
  padding: 10px;
  border: 1px solid black;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: blue;
  position: sticky;
  top: 50px;
  left: 50px;
}
.box3 {
  background-color: green;
}

Выход:

В приведенном выше примере второе поле будет вести себя как относительный элемент, пока не достигнет позиции top: 50px; при прокрутке, после чего оно будет вести себя как фиксированный элемент.

Заключение

Свойство position в CSS определяет положение элемента относительно содержащего его элемента или области просмотра.

Свойство position имеет следующие возможные значения:

static: это позиционирование по умолчанию для всех элементов HTML. Элементы располагаются в обычном потоке документа и следуют структуре HTML.

относительный: элементы с position: relative следуют своему обычному потоку документов, но могут быть смещены из исходного положения.

абсолютный: элементы с position: absolute не соответствуют нормальному потоку документа. Элемент позиционируется относительно своего предка, расположенного в шкафу. Если предка нет, то элемент будет позиционироваться относительно окна просмотра.

исправлено: элементы с position: fixed позиционируются относительно области просмотра и остаются фиксированными даже при прокрутке страницы.

sticky: элементы с position: sticky позиционируются в зависимости от положения прокрутки пользователя.

Имея четкое представление о свойстве position, мы можем добиться желаемых макетов и взаимодействий на наших веб-страницах.

Спасибо за прочтение.

Продолжайте кодировать!

Для получения дополнительной информации нажмите здесь!