Системы координат в HTML / CSS для разных схем позиционирования - PullRequest
Новая
       11

Системы координат в HTML / CSS для разных схем позиционирования

0 голосов
/ 02 сентября 2018

Я изучал HTML / CSS и, читая статью CSS Positioning 101 , я натолкнулся на следующее утверждение:

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

Тогда автор также заявляет:

Создание системы координат для дочерних элементов является еще одним из относительное позиционирование суперспособностей

Ok. Это относительно просто понять, подумал я. Поэтому я сделал несколько прогнозов и хотел проверить их, чтобы убедиться, что все правильно.

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

<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Example D</title>
  <style>
    #box_1 {
      position: static;
      width: 200px;
      height: 200px;
      background: #ee3e64;
    }
    
    .box_2 { /*made it into a class*/
      position: relative;
      left: 200px;
      width: 200px;
      height: 200px;
      background: #44accf;
    }
    
    #box_3 {
      position: static;
      width: 200px;
      height: 200px;
      background: #b7d84b;
    }
  </style>
  <meta id="dcngeagmmhegagicpcmpinaoklddcgon">
</head>

<body>
  <div id="box_1">
    <div class="box_2"></div>
  </div>
  <div id="box_3">
    <div class="box_2"></div>
    <!-- created a new box_2 inside box_3 -->
  </div>
</body>

</html>

Для меня результат был неожиданным.

enter image description here

Я предсказал, поскольку box_3 является статическим элементом (и, следовательно, не устанавливает новую систему координат), box_2 внутри него должен быть точно в том же месте, что и первый box_2, так как оба они будут использовать систему координат документа в качестве ссылка. Вместо этого второй box_2 был смещен на 200 пикселей, как если бы статический элемент box_3 действительно создал новую систему координат для своих дочерних элементов, в отличие от того, что сказал автор.

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

Я только что все неправильно понял или эта статья и эти утверждения просто ложны? Если я ошибся, что автор подразумевает под «создать новую систему координат»?

Спасибо за помощь!

1 Ответ

0 голосов
/ 03 сентября 2018

Вы правы. Пример D в статье не демонстрирует новую систему координат, как это утверждается.

Позиционированные элементы, то есть элементы, которые имеют значение позиции, отличное от static, которое, очевидно, включает в себя, но не ограничивается relative позиционированными элементами, создают новую систему координат для их абсолютных позиционированных потомки. Таким образом, для потомков элементов с относительным расположением, которые имеют position:absolute, их значения свойств left, right, top и bottom смещены относительно этого элемента с относительным позиционированием.

Но в примере D и box_1, и box_2 относительно расположены. Box_1 может установить новую систему координат для своих потомков, но box_2 не использует ее. Поскольку box_2 имеет значение position:relative, его значения left, top и т. Д. Перемещают элемент из положения, которое он имел бы в нормальном потоке, и не извлекаются из какой-либо новой системы координат.

Следовательно, box_1 мог быть position:static без изменения окончательного местоположения box_2.

См. Комментарии 20 и 32 к статье.

...