我正试图围绕.dropdown-content放置absolute relative，但没有包含absolute或<body>的父级。 } 在那儿。我已经遵循了许多教程，其中提到如果没有这样的父级，它将被附加到<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<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>
</body>
</html>
标记。为什么这里需要这种绝对定位。
我也遇到了tutorial，其中谈到了这种定位父母的非必要性。
编辑：
插入代码，因为链接可能会在一段时间后死亡
<div id="first"></div>
<div id="second"></div>
答案 0 :(得分：5)
没有为该元素定义的职位（bottom，left，right或top），因此它将处于无需位置的位置绝对定位;在这种情况下，所有绝对定位都是将其从页面的正常流程中取出，这样它就不会影响其父级的大小。尝试删除position属性，看看会发生什么。
您还应该注意，如果绝对定位的元素不是定位元素的后代（无论是absolute，fixed，relative还是sticky）元素，那么它的位置是相对于视口设置的。
答案 1 :(得分：1)
绝对 - 这是一种非常强大的定位类型，允许您将任何页面元素准确地放置在您想要的位置。您可以使用顶部，左下角和右侧的定位属性来设置位置。请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。如果没有这样的父级，它将默认一直返回到元素本身，这意味着它将相对于页面本身放置。 关于绝对定位的权衡和最重要的事情是，这些元素将从页面上的元素流中删除。具有此类定位的元素不受其他元素的影响，并且不会影响其他元素。每次使用绝对定位时都要考虑这个问题。过度使用或不当使用会限制您网站的灵活性。
在w3school的上述示例中，没有左下角的左上角属性，所以它不会考虑身体的位置。