下拉菜单的最外层为什么要使用position:relative？
css吧
全部回复
仅看楼主
level 2
廉价喵 楼主
我看了很多文章，大家的框架都是：
<style>
.dropdown {
position: relative;
display: inline-block;}
.dropdown-content {
display: none;
position: absolute; }
.dropdown:hover .dropdown-content {
display: block;}
</style>
然后实例是
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
<meta charset="utf-8">
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p>W3Cschool教程</p>
<p>http://www.w3cschool.cn


</div>
</div>
</body>
</html>
很多人的备注都是：
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
我对这个备注有一些疑问：
一、
最外层的div用的是dropdown，position: relative;然后内层的div用的是dropdown-content，position: absolute;
那么岂不是只有一个<span>的position是relative？
但是relative的作用是，相对定位元素的定位是相对其正常位置
那么<span>也没有进行相对位置的定位呀，为啥要用position: relative呢？
二、
我再看了一下内层的div用的position: absolute，“设置下拉菜单的内容放置在下拉按钮的右下角位置”难道不是由position: absolute保证的吗？同样也不需要position: relative呀？
我把position: relative删掉之后再运行，下拉菜单还是可以正常工作的。
2021年04月10日 12点04分 1
level 2
廉价喵 楼主
哦，外层的position: relative是对外层div起作用，和里面的<span>元素无关
那个是我搞错了
不过关于下拉列表的位置还是应该和外层的position: relative无关的把
2021年04月10日 12点04分 2
level 7
周存存
有关系，如果外层不设置position的话，你会发现下拉菜单的位置定位到整个页面的左上角
比较形象的解释：
元素B在元素A的里面。
A不设置定位，B设置绝对定位，那么B会相对于整个网页定位自己；
A设置相对定位，B设置绝对定位，那么B会相对于A定位自己。
Magic.
2021年04月12日 10点04分 3
level 2
廉价喵 楼主
大佬，但是我试过之后确实外层不用relative也可以……
2021年04月13日 16点04分 4
1