Почему элемент x ниже другого элемента y переместился вверх, когда элемент y имеет абсолютную позицию - PullRequest
Новая
       24

Почему элемент x ниже другого элемента y переместился вверх, когда элемент y имеет абсолютную позицию

0 голосов
/ 19 апреля 2019

Есть div container, который содержит 2 поля: желтый и зеленый.Зеленая коробка чуть ниже желтой.Когда мы перемещаем желтое поле, используя верх и низ относительно контейнера, оно перемещается, не нарушая положение зеленого поля.Но когда мы перемещаем Желтое поле, используя верх и низ Absolutely к контейнеру, тогда зеленое поле также перемещается вверх.Почему позиция зеленого ящика изменилась?

JSFiddle Output 

.box {
      width:100px;
      height:100px; 
    }
    
    .container {
      width:500px;
      height:500px; 
      position:relative;
      background: #333;
    }

    #box-1 {
      position: relative;
      top: 50px;
      left:50px;
      background: red;
    }
    #box-2 {
      position: absolute;
      /* position: relative; */
      top:100px;
      left:100px;
      background: yellow;
    }
    #box-3 {
      background: green;
    }
    #box-4 {
      background: blue;
    }
    #box-5 {
      background: orange;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    
  </style>
</head>
<body>
  <div id="box-1" class="box"></div>
  <div class="container">
    <div id="box-2" class="box"></div>
    <div id="box-3" class="box"></div>
  </div>
  <div id="box-4" class="box"></div>
  <div id="box-5" class="box"></div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 20 апреля 2019

ОТНОСИТЕЛЬНО позиционированный элемент позиционируется relative to ITSELF.

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

This <div> element has position: relative;

ABSOLUTE позиционированный элемент позиционируется относительно IT'S CLOSEST POSITIONED PARENT., если он присутствует, то онработает как фиксированный ..... относительно окна.

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

, для дальнейшего понимания вы можете посетить https://www.w3schools.com/css/css_positioning.asp

0 голосов
/ 20 апреля 2019

Вы найдете ответ здесь https://developer.mozilla.org/en-US/docs/Web/CSS/position

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

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

Итак, зеленая коробка на самом деле движется, потому что вы удаляете желтую коробку из «ландшафта».

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

...