Is getBoundingClientRect(). Left возвращает неправильное значение?

Question

Я хочу позиционировать DIV «.indicator» только там, где начинается литий элемент, так , например, если я хочу, чтобы позиционировать DIV по отношению ко второй Li , я:

indicator.style.left = li[1].getBoundingClientRect().left+"px"; 

Этот мой код:

var li = document.querySelectorAll(".ulcontainer > li"); 
 

 
var indicator = document.querySelector(".indicator"); 
 

 
indicator.style.left = li[1].getBoundingClientRect().left+"px";

html { 
 
    box-sizing: border-box; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 
.ulcontainer { 
 
    white-space: nowrap; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 
.ulcontainer li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    border: 1px solid; 
 
    padding: 0 20px; 
 
} 
 

 
.indicator { 
 
    background-color: red; 
 
    display: inline-block; 
 
    position: relative; 
 
}

<ul class="ulcontainer"> 
 
    <li>OPTION 1</li><li>OPTION 2</li><li>OPTION 3</li> 
 
</ul> 
 
<div class="indicator">indicator</div>

проблема заключается в том, что DIV getBoundingClientRect() слева не возвращается.- правильное значение для элементов li. Если вы запустите пример, вы увидите, что «.индикатор» не запускает в начале текущего li.

Почему не getBoundingClientRect(). Left возвращает текущее значение?

Answer 1

.indicator имеет родственник позиционирование. Таким образом, любое смещение будет относиться к его положению по умолчанию, не относительно окна браузера. (Для контраста, фиксированной положения почти всегда относительно окна браузера, а абсолютного положения по отношению к ближайшему расположению предка -. Которая часто в окне браузера)

Поскольку .indicator представляет собой блок -level, а его непосредственным родителем является тело документа, его левая позиция по умолчанию равна левому краю тела документа.

Установить тело запас до 0, и он будет выстраиваться:

var li = document.querySelectorAll(".ulcontainer > li"); 
 

 
var indicator = document.querySelector(".indicator"); 
 

 
indicator.style.left = li[1].getBoundingClientRect().left+"px";

body { 
 
    margin: 0; 
 
} 
 
html { 
 
    box-sizing: border-box; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: inherit; 
 
} 
 
.ulcontainer { 
 
    white-space: nowrap; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 
.ulcontainer li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    border: 1px solid; 
 
    padding: 0 20px; 
 
} 
 

 
.indicator { 
 
    background-color: red; 
 
    display: inline-block; 
 
    position: relative; 
 
}

<ul class="ulcontainer"> 
 
    <li>OPTION 1</li><li>OPTION 2</li><li>OPTION 3</li> 
 
</ul> 
 
<div class="indicator">indicator</div>