Объясните неграмотной.

Общее
1

После испытания https://htmlacademy.ru/courses/57/run/19 я всерьез задумалась о тому, что ничего не понимаю в позиционировании(в процентах). Вот не понимаю как это сердечко двигается относительно А и все. Пыталась разобраться. Рисовала в песочнице каляки-маляки и все вроде встало на свои места:

  1. Если элементы не спозиционированы, то отступ в процентах будет высчитываться у ширины родителя.То есть, если ширина 200 рх, то margin-left:10% это 20 рх. Сейчас я понимаю, что я кэп, но зачем я это пишу вы поймете позже:slight_smile:
  2. Если мы имеем absolute в relative, то история такая же.
  3. И вот тут мой мозг отказывается работать.
    http://codepen.io/danyabus/pen/dXdjwJ
    вот мои каляки, собственно. У нас есть background-image. Он двигается относительно элемента child.Задав ему координаты 30% 50% я ожидаю, что он подвинется на (30% от 100рх) 30рх. А этот гад двигается на 24. В итоге разобрав около 10ти случаев я вывела формулу (я думаю, что она существовала и до меня, но я о ней не знала.) Что если мы задаем координату в процентах, то она высчитывается так:берется процент родителя и отнимается этот же процент дочернего элемента. И главный вопрос темы:зачем? Почему при высчитывании координат в первых двух вариантах процент высчитывается просто из ширины родителя, а в третьем случае учитывается еще и ширина дочернего элемента?
2

В первом случае сдвигается верхний левый угол элемента. А во втором, где изображение - движение происходит от центра.

3

если бы от центра, то тогда элемент двигался на 20 рх, а не 24рх.

4

все верно расчитывается, так и должно быть, элемент же занимает область, а позиционирование для него вы задаете не относительно контейнера а относительно свободного пространства внутри, а свободное пространство с учетом размера картинки 80px, следовательно 30% это 24px, ну если логически рассуждать. Я более чем уверен что так происходит.

2 лайка
5

так то оно да, но почему у первых двух случаев происходит по-другому?

6

ааааа, так это наверно происходит от того, что при относительном позиционировании элемент выпадает из потока?Так получается?

1 лайк
7

Свойства другие потому что, там вы позиционируете абсолютно, а абсолютное позиционирование это позиционирование элемента которые как бы не существует в потоке и плавает по нему как ему угодно, а тут свойство background-position оно видимо работает с учетом ширины background-image

8

Вот видите) все верно

1 лайк