Question

我想要3个带有背景图像的盒子，它们漂浮在盒子后面并溢出盒子内容。

此代码在首次加载时效果很好，但是当我单击锚点时，选定的框会向上移动。我不明白为什么当框的位置设置为相对且父框不移动时框会向上移动。

当我单击其中一个锚点时，为什么内盒会向上移动？

.box>img {
  position: absolute;
}

.box {
  position: relative;
  overflow: hidden;
}

.inner-box {
  border: 1px solid red;
  background-color: rgba(0, 80, 0, 0.8);
  padding: 20px;
  position: relative;
}

<a href="#a">Anchor 1</a> <a href="#b">Anchor 2</a> <a href="#c">Anchor 3</a>
<div class="box">
  <img src="https://via.placeholder.com/1500x500" />
  <div class="inner-box">
    <a name="a">Anchor  1</a>
  </div>
</div>
<div class="box">
  <img src="https://via.placeholder.com/1500x500" />
  <div class="inner-box">
    <a name="b">Anchor 2</a>
  </div>
</div>
<div class="box">
  <img src="https://via.placeholder.com/1500x500" />
  <div class="inner-box">
    <a name="c">Anchor 3</a>
  </div>
</div>

Answer 1

这有点棘手，但是行为是合乎逻辑的，并且是由于滚动所致。基本上在您的盒子内部，您隐藏了溢出的内容，但我们也可以启用滚动功能以查看其中的内容

如果考虑滚动，这是代码：

.box>img {
  position: absolute;
}

.box {
  position: relative;
  overflow: auto;
  margin:10px;
}

.inner-box {
  border: 1px solid red;
  background-color: rgba(0, 80, 0, 0.8);
  padding: 20px;
  position:relative;
}

:target {
  background:red;
}

<a href="#a">Anchor 1</a> <a href="#b">Anchor 2</a> <a href="#c">Anchor 3</a>
<div class="box">
  <img src="https://via.placeholder.com/1500x500" />
  <div class="inner-box">
    <a id="a">Anchor  1</a>
  </div>
</div>
<div class="box">
  <img src="https://via.placeholder.com/1500x500" />
  <div class="inner-box">
    <a id="b">Anchor 2</a>
  </div>
</div>
<div class="box">
  <img src="https://via.placeholder.com/1500x500" />
  <div class="inner-box">
    <a id="c">Anchor 3</a>
  </div>
</div>

现在很明显，我们可以滚动框内的内容，而且单击锚点也将触发相同的滚动以将目标移到其容器的顶部也很简单。您可以轻松调整滚动条，然后再次单击锚点以查看此逻辑行为。

现在，如果您隐藏了溢出，则将具有相同的行为，但不再有滚动条来手动滚动。换句话说，即使隐藏了溢出，您仍然可以像在示例中一样触发滚动。

这是另一个可以更好地说明的例子：

.box>img {
  position: absolute;
}

.box {
  position: relative;
  overflow: hidden;
  margin: 10px;
  height:40px;
}

.inner-box {
  border: 1px solid red;
  background-color: rgba(0, 80, 0, 0.8);
  padding: 20px;
  position: relative;
}

:target {
  background: red;
}

<a href="#a">Anchor 1</a> <a href="#b">Anchor 2</a> <a href="#c">Anchor 3</a>
<div class="box">
  <div class="inner-box">
    <a id="a">Anchor  1</a>
  </div>
  <div class="inner-box" style="background:yellow;">
    <a id="b">Anchor 2</a>
  </div>
  <div class="inner-box">
    <a id="c">Anchor 3</a>
  </div>
</div>

单击每个锚点，您可以清楚地看到内容的移动（滚动）方式。

您可以在规范中找到有关此行为的完整说明：https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-fragid

在此 complex 说明中，您将找到：

将目标滚动到视图中，行为设置为“自动”，阻止设置为“开始”，内联设置为“最近”。

然后要了解将目标滚动到视图中，请参阅：https://drafts.csswg.org/cssom-view/#scroll-an-element-into-view

为避免代码中出现此行为，请确保目标已位于顶部：

.box>img {
  position: absolute;
}

.box {
  position: relative;
  overflow: hidden;
  margin: 10px;
}

.inner-box {
  border: 1px solid red;
  background-color: rgba(0, 80, 0, 0.8);
  padding: 0 20px 20px; /* Remove top padding */
  position: relative;
}
/* Make the anchor behave at the top */
.inner-box a:before {
  content:"";
  display:block;
  height:20px; /*replace top padding*/
}

:target {
  background: red;
}

<a href="#a">Anchor 1</a> <a href="#b">Anchor 2</a> <a href="#c">Anchor 3</a>
<div class="box">
  <img src="https://via.placeholder.com/1500x500" />
  <div class="inner-box">
    <a id="a">Anchor  1</a>
  </div>
</div>
<div class="box">
  <img src="https://via.placeholder.com/1500x500" />
  <div class="inner-box">
    <a id="b">Anchor 2</a>
  </div>
</div>
<div class="box">
  <img src="https://via.placeholder.com/1500x500" />
  <div class="inner-box">
    <a id="c">Anchor 3</a>
  </div>
</div>

Answer 2

Basically whenever you are adding <img> tag it's width and height should be set 100%.when you hover on img tag you can see it is exceeding that box width and height in inspect element.so just add 
.box>img{
  width:100%;
 height:100%;
position :absolute;
}




    .box>img {
      position: absolute;
      width:100%;
      height:100%;
    }

    .box {
      position: relative;
      overflow: hidden;
    }

    .inner-box {
      border: 1px solid red;
      background-color: rgba(0, 80, 0, 0.8);
      padding: 20px;
      position: relative;
    }
    <a href="#a">Anchor 1</a> <a href="#b">Anchor 2</a> <a href="#c">Anchor 3</a>
    <div class="box">
      <img src="https://via.placeholder.com/1500x500" />
      <div class="inner-box">
        <a name="a">Anchor  1</a>
      </div>
    </div>
    <div class="box">
      <img src="https://via.placeholder.com/1500x500" />
      <div class="inner-box">
        <a name="b">Anchor 2</a>
      </div>
    </div>
    <div class="box">
      <img src="https://via.placeholder.com/1500x500" />
      <div class="inner-box">
        <a name="c">Anchor 3</a>
      </div>
    </div>

当我单击链接时，为什么内盒会移动？

2 个答案: