位置：相對；位置：絕對；在下拉串列中-有解無憂

在https://www.w3schools.com/css/css_dropdowns.asp 它把

position: relative;
position: absolute;

為了

.dropdown
.dropdown-content

分別。

我按如下方式洗掉了它們，似乎它仍然有效，它們重要嗎？

.dropdown {    
display: inline-block;
  }
  
  .dropdown-content {
display: none;     
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;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
  </head>
  <body>
<div class="dropdown">
    <span>Mouse over me</span>
    <div class="dropdown-content">
      <p>Hello World!</p>
    </div>
  </div>
  </body>
</html>

uj5u.com熱心網友回復：

如果您不添加它，它將移動下一個元素。

.position-relative{
  position:relative;
}

.position-absolute{
  position:absolute;
}

.dropdown {    
  margin-left:30px;
  display: inline-block;
}

.dropdown-content {
  display: none;     
  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;
}

<div class="dropdown position-relative">
  <span>Relative Position</span>
    <div class="dropdown-content position-absolute">
      <p>Absolute Position</p>
    </div>
  </div>
<div>No shift</div>

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

通過position:absolute在position:relative元素內部使用，您可以根據外部 div 設定內部 div 的位置。

.outer{
  width:80px;
  height:80px;
  background-color:orange;
}
.inner{
  position:absolute;
  right:20px;
  top:20px;
  
  width:30px;
  height:30px;
}
.position-relative{
  position:relative;
}
.blue{
  background-color:blue;
}
.red{
  background-color:red;
}

<div class="outer position-relative">
  <div class="inner red"></div>
</div>
<br>
<div class="outer">
  <div class="inner blue"></div>
</div>

uj5u.com熱心網友回復：

如果您在下拉串列中有某些內容，position: relative則position: absolute下拉串列將顯示在其頂部。如果您將其洗掉，則下拉選單將出現在兩者之間，并將內容本身推到底部。

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute; /*try commenting this line*/
  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;
}
</style>
</head>
<body>

<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>
<p>Under dropdown<p>

</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/471174.html

標籤：html css

上一篇：用HTML列印表格

下一篇：從Apache遷移到Nginx時出現Wordpress錯誤404