Как сделать так, чтобы div показывался выше на странице перед контентом в потоке?

Question

Это довольно простой вопрос дизайна, но все же: у меня есть заголовок в одном файле и несколько страниц, которые последовательно загружаются в другие файлы. Я хочу добавить индикатор прогресса (просто изображение заполненной строки 1/3, 2/3 и 3/3) для каждой из этих страниц, но я хочу, чтобы панель отображалась в заголовке, который находится в другом файле и выше поток, поэтому отрицательные поля + z-index не работают. Как сделать так, чтобы мой индикатор, который логически принадлежит странице под заголовком, отображался в заголовке?

Answer 1

Возможно, вам нужно расположить индикатор выполнения в абсолютных координатах, как в

.processBar
{
  position: fixed;
  left: 50%;
  top: 10%;
  z-index: 1000;
}

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

РЕДАКТИРОВАТЬ : cdonner правильный, положение: фиксированное положение элемента согласно окну браузера

Answer 2

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

Положение смещения абсолютно позиционного элемента рассчитывается относительно ближайшего родительского элемента, который абсолютно / относительно позиционирован (если такового нет, относительно документа).

Так что да, как уже отмечали другие, вы можете использовать position: absolute и позицию в терминах top и left.

Answer 3

как насчет позиции: абсолютное расположение?