Absolute positioning working without relative positioning in the parent(绝对定位在没有父级相对定位的情况下工作)

本文介绍了绝对定位在没有父级相对定位的情况下工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试理解一个教程，其中.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)元素的后代，则其位置是相对于视口设置的。

这篇关于绝对定位在没有父级相对定位的情况下工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！