我正试图围绕一个教程,其中 .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>
最佳答案
没有为该元素定义位置(bottom
、left
、right
或 top
),因此它因此将坐在没有绝对定位的位置;在这种情况下,所有绝对定位都是将其从页面的正常流动中取出,这样它就不会影响其父级的大小。尝试删除 position
属性,看看会发生什么。
您还应该注意,如果绝对定位元素不是定位元素的后代(无论是 absolute
、fixed
、relative
或 sticky
) 元素,然后它的位置是相对于视口(viewport)设置的。
关于css - 在父级中没有相对定位的绝对定位工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38144953/