CSS笔记——下拉菜单中设置position:relative和absolute的作用_.对于下拉菜单中的弹出菜单,应设置其对应元素的 position 属性的取值为 absolute-优快云博客

参考：
https://tieba.baidu.com/p/7296527799
https://zhidao.baidu.com/question/680206989655498852.html

下拉菜单的基本框架

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
}
.dropdown:hover .dropdown-content {
  display: block;
}

relative 定位

relative 定位元素的定位是相对其正常位置，经常被用来作为 absolute 定位元素的容器块。

absolute 定位

absolute 定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间，absolute 定位的元素和其他元素重叠。

两种定位在下拉菜单中的作用

一般情况下，设置相对定位主要是为了让下级的绝对定位以它为起始点，相对定位对本身元素没多大影响，也就是说，将 .dropdown 设为相对定位，是为了让下级的 .dropdown-content 的绝对定位以它为起始点，即将下拉菜单的内容放置在下拉按钮的右下角位置；如果 .dropdown 没有设为相对定位，下拉菜单内容的位置会定位到整个页面的左上角。