html - 当 CSS 中根本不使用 position 属性时，定义 'position: relative' 有什么区别？

Question

Position: Relative 修复 html 中相对于父元素的边距。当我们在 CSS 中定义边距(或填充)时，这不是会发生什么吗？

这样定义它有什么区别和用途？

我在定义下拉菜单时看到，下拉元素的父元素是用 position: relative 定义的，它应该对定义为 position: absolute 的子元素有影响。

这是在 : https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text 给出的

但是当我删除父级的 position: relative 时，它没有任何影响，显示相同的结果。

Answer 1

定义 position: relative; 在给定子元素 top, right, bottom 或 left 属性(使用 position: absolute)。这是因为子元素的位置是相对于第一个具有 position 而非 position: static 的父元素(position< 的默认值)。

换句话说，通过从父元素中删除 position: relative .dropdown-content 现在相对于 body 元素(或任何父元素包含relative、static 或 fixed 的位置。如果您要给 .dropdown-content 元素一个top: 10px;，距离 body 元素顶部 10px。

通过给 .dropdown 一个 position: relative .dropdown-content 将相对于 .dropdown 定位，所以它距离 .dropdown 顶部 10px - 意味着 dropdown-content 将出现在页面顶部。

父级上没有position: relative

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 10px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

使用 position: relative on parent

.dropdown {
    display: inline-block;
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 10px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>