At https://www.w3schools.com/css/css_dropdowns.asp
It puts
position: relative;
position: absolute;
for
.dropdown
.dropdown-content
respectively.
I removed them as follows and seems it still works, are they important?
.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>>Solution :
If you don’t add it, it will shift the next elements.
.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>By using position:absolute inside a position:relative element, you can set the position of the inner div depending on the outer one.
.outer{
width:100px;
height:100px;
background-color:orange;
}
.inner{
position:absolute;
right:50px;
top:50px;
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>