Question

我想在li元素开始的位置放置一个div“.indicator”，所以例如，如果我想将div相对于第二个，我做：

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（）。left没有返回 li元素的正确值。如果运行该示例，您将看到“.indicator”未启动在当前李的开始。

为什么getBoundingClientRect（）。左边没有返回当前值？

Answer 1

.indicator具有相对定位。因此，相对于浏览器窗口，任何偏移都将相对于其默认位置 not 。（相比之下，固定位置几乎总是相对于浏览器窗口，绝对位置相对于最近定位的祖先 - 这是通常是浏览器窗口。）

由于.indicator是块级元素，并且其直接父级是文档正文，因此其默认左侧位置等于文档正文的左边距。

将身体边距设置为0，它将排成一行：

＆＃13;

var li = document.querySelectorAll(".ulcontainer > li");

var indicator = document.querySelector(".indicator");

indicator.style.left = li[1].getBoundingClientRect().left+"px";

＆＃13;

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;
}

＆＃13;

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

＆＃13;

getBoundingClientRect（）。左边返回错误的值吗？

1 个答案: