Как выровнять фиксированные и позиционированные элементы - PullRequest
0 голосов
/ 21 мая 2018

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

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

/* These elements need to line up horizontally, but do not */

div.line-one {
  position: fixed;
  right: 20vw;
}

div.line-two {
  position: absolute;
  right: 20vw;
}

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 21 мая 2018

Они оба вынуты из обычного потока документов и расположены там, где они должны быть, в одном месте.Из-за их определенных положений они не мешают друг другу.

Единственное "отношение" между ними - это порядок размещения в DOM, поэтому абсолютно позиционированный div помещается поверх фиксированного фиксированного , потому что оно следует за ним в HTML.

.line-one {
  position: fixed;
  right: 20vw;
  background: red;
  z-index: 1; /* just so that you can see both; remove it and you'll see it's hidden under the "absolute" */
}

.line-two {
  position: absolute;
  right: 20vw;
  background: green;
}
<div class="line-one">fixed</div>
<div class="line-two">absolute</div>

Таким образом, чтобы расположить их рядом друг с другом, вам нужно «толкнуть» одного из них на ширину другого,предпочтительно с использованием CSS calc() функции :

.line-one {
  position: fixed;
  right: 20vw;
  background: red;
}

.line-two {
  position: absolute;
  right: calc(20vw + 32px);
  background: green;
}
<div class="line-one">fixed</div>
<div class="line-two">absolute</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...