Они оба вынуты из обычного потока документов и расположены там, где они должны быть, в одном месте.Из-за их определенных положений они не мешают друг другу.
Единственное "отношение" между ними - это порядок размещения в 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>