Блог

Главная - Вопросы по программированию - CSS: абсолютная позиция вместе с полем: автоматическое центрирование — как это работает?

CSS: абсолютная позиция вместе с полем: автоматическое центрирование — как это работает?

#html #css

#HTML #css — файл #css

Вопрос:

Я видел этот шаблон для центрирования элемента на веб-сайте в коде кого-то другого:

 img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}  
 <img src="https://placebear.com/200/300" alt="picture-one" />

Работает нормально. Без сомнения!

Но я не могу представить, что на самом деле делает CSS-код.

Я видел похожий код, в котором позиционирование использовалось для расширения дочернего элемента до размера его родительского.

 #child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: lime;
}

#wrap {
  width: 100%;
  height: 800px;
}  
 <div id="wrap">
  <div id="child"></div>
</div>

Но здесь для меня это не имеет никакого смысла.

Может ли кто-нибудь объяснить мне, как работает эта впервые показанная техника?

Что делают отдельные свойства и как это в конечном итоге приводит к получению результата?

Я был бы признателен вам за это.

Ответ №1:

 #child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  width: 250px;
  margin: auto;
  background-color: lime;
}

#wrap {
  width: 100%;
  height: 800px;
}  
 <div id="wrap">
  <div id="child"></div>
</div>

Это потому, что изображение имеет ширину и высоту по умолчанию.

Когда вы используете

 position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

Элемент получит размер окна и разместит элемент внутри него.

 #child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  width: 250px;
  margin: auto;
  background-color: lime;
}

#wrap {
  width: 100%;
  height: 800px;
  position: relative;
}  
 <div id="wrap">
  <div id="child"></div>
</div>

Итак, если вы зададите position относительно #wrap, абсолютная #дочерняя позиция будет соответствовать родительской.

Надеюсь, это поможет! Приветствия!

Ответ №2:

position: absolute позволяет вам установить расстояние от вашего элемента сверху, снизу, справа и слева от краев всей страницы.

Во втором примере, который вы показали, даже если #wrap имеет высоту 800 пикселей, расстояние #child от каждой стороны страницы установлено равным 0. Таким образом, оно охватывает всю страницу!

Надеюсь, это помогло!

Ответ №3:

 #inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  width: 250px;
  margin: auto;
  background-color: #000; border:1px solid #fff;
}

#container {
  width: 100%;
  height: 800px;
}  
 <div id="container">
  <div id="inner"></div>
</div>