An absolute element is covered when making wrapper element relative

user_5405636 0
Viewed 314

This is a question to a W3School example here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

You can see the "Dropdown" button in header - it's not positioned as relative. If I make .dropdown element as relative, the absolute dropdown is not working anymore.

I created a JsFiddle. I only added one line at line 30.

Can some one explain - why the absolute dropdown is covered, when the wrapper element is positioned as relative?

css html
4 Answers

Couple issues:

  1. Your dropdown-content is absolute, so you should specify where you are placing to the relative parent element position: relative. Use top, left, right and/or bottom positioning to place the absolute element. positioning to place the absolute element.

  2. Also, your overflow needs to be visible else you will not be able to see the dropdown content. By default not adding overflow will set it to visible so it can be removed.

I also removed the old float for nav items with display: flex, this will place elements within the flex element inline by default without the need to clear the floats.

body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  display: flex;
  background-color: #333;
}

.navbar a {
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {  
  /* !!! I'm making the wrapping element position as relative !!!*/
  position:relative;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

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

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

user_15335920

Because you applied 'overflow:hidden'.

As the parent's position changes to relative, the absolute can no longer ignore the overflow, so it becomes invisible.

enter image description here

user_132661430

When you set the .dropdown to position: relative, it means the child of this element is .dropdown-content (position: absolute;) can not show out of .dropdown box. So you can't see this.

Dropdown box size:

enter image description here

When .dropdown have position: relative:

enter image description here

When .dropdown have not position: relative:

enter image description here Not related to overflow: hidden you can remove this line anymore.

user_38000890

Relative - Even if you don’t set a z-index value, the relative element will now appear on top of any other statically positioned element. You can’t fight it by setting a higher z-index value on a statically positioned element.

Wrapper: position: relative.

Dropdown is going to the front.

2

Wrapper: position: static

3

user_132622040
Related