logo标签列表

在父元素没有相对定位情况下，绝对定位生效。

csscss-position
5

我正在努力理解一个教程，其中.dropdown-content被放置在absolute位置，但没有包含relative或absolute的父元素。

我已经按照许多教程进行了操作，在这些教程中提到，如果没有这样的父元素，它将附加到<body>标记上。为什么在这里需要绝对定位。

我还发现this，其中谈到了不需要这样定位的父元素。

以下是教程中的代码：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  # What is the significance of this,
  since there is no positioned parent. background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

提示：避免使用W3Schools作为学习资源。 - Shaggy
2
如果没有定位的祖先元素，绝对定位的元素不会使用body作为包含块。它会使用初始包含块，也就是视口。 - Michael Benjamin
@Michael_B：依附于视口是否意味着它将基本上固定在位置上？如果没有父定位块，则使用初始包含块。但是，对我来说使用视口似乎有点令人困惑。 - Abhishek
https://drafts.csswg.org/css-position-3/#def-cb - Michael Benjamin
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details - Michael Benjamin
2个回答
15

该元素没有定义(bottom, left, right或top)的位置，因此它将停留在不使用绝对定位时所处的位置；在这种情况下，所有绝对定位所做的就是将其从页面的正常流程中拿出来，以便它不会影响其父容器的大小。尝试删除position属性并观察发生了什么。

您还应该注意，如果绝对定位的元素不是定位元素（无论是absolute、fixed、relative还是sticky），则其位置相对于视口设置。

我明白你的意思。只是为了确保，使用绝对定位的目的是防止 <ul> 在高度上占用更多的空间，对吗？既然你建议不要使用 w3schools，那么有没有其他的方法可以实现这个效果呢？提前致谢。 - Abhishek
3
你的最后一段在多个方面都是不正确的。它不一定是相对定位元素的后代，祖先元素只需要被定位（相对定位、绝对定位、固定定位或黏性定位）即可。当没有其他定位的祖先元素时，它也不会相对于 body 定位，而会使用初始包含块。 - Michael Benjamin
在这种特定情况下，是的，绝对定位就是在做这个。然而，为了避免任何潜在的问题，现在或将来，您应该始终指定位置。W3Schools不是一个值得信赖的资源，有很多其他更好的资源，比如MDN。 - Shaggy
抱歉，@Michael_B，你的第一点当然是正确的 - 我今天早上遇到了服务器崩溃和硬盘故障等可怕的问题，所以我的大脑没有完全运转！你能详细解释一下你在第二点中所说的“初始包含块”是什么吗？ - Shaggy
糟糕！一句话里犯了两个新手错误 - 我想我需要在今天剩下的时间里远离SO。感谢你发现并纠正我的错误。 - Shaggy
1
绝对定位 - 这是一种非常强大的定位类型，允许您将任何页面元素精确地放置在所需位置。您可以使用定位属性top、left、bottom和right来设置位置。请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。如果没有这样的父元素，它将默认回到元素本身，这意味着它将相对于页面本身定位。 关于绝对定位的权衡和最重要的事情是，这些元素从页面元素流中删除。具有此类定位的元素不受其他元素影响，也不影响其他元素。每次使用绝对定位时都要认真考虑这一点。过度使用或不当使用会限制站点的灵活性。
在上面的w3school示例中，没有top、bottom、left和right属性，因此它不会考虑与body的位置。
1
为什么会有这个踩的操作，有人可以告诉我是因为格式问题吗？ - Sagar Kodte
1
我不知道是谁给你的回答点了踩，但可能是因为你引用了某个地方的内容却没有注明出处。不过还是感谢你抽出时间来回答这个问题。 :) - Abhishek
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接