Как выровнять элементы с фиксированным и абсолютным позиционированием

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

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

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

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

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

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

css

21.05.2018

Элементы fixed позиционируются относительно всего документа (окна/экрана). Элементы absolute позиционируются относительно родителя, имеющего позицию relative. Если вы не опубликуете свою html-структуру и не создадите рабочий пример своей проблемы... мы не сможем вам помочь 21.05.2018
Мои извинения, элемент с абсолютным позиционированием находится в контейнере со 100% шириной и без полей/отступов. Я старался для краткости :) 22.05.2018
добавьте полный фрагмент, который воспроизводит вашу проблему, и хорошо объясните, что вам нужно для достижения 22.05.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>

21.05.2018

Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js

Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…

Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей

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

Объяснение документов 02: BERT

BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?

Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Метки
Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning