CODEWITHSUNDEEP
csscss-position
Abhishek
Abhishek

Reputation: 2673

Absolute positioning working without relative positioning in the parent

I am trying to wrap my head around a tutorial, where the .dropdown-content is placed absolute, but there is no parent containing the relative or absolute is there.

I have followed many tutorials, where it is mentioned that if there is no such parent, it will be attached to the <body> tag. Why is this absolute positioning is required here.

I also came across this, which talks about non necessity of such positioned parent.

Here's the code from the tutorial:

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>

Upvotes: 5

Views: 11665

Answers (2)

Shaggy
Shaggy

Reputation: 6796

There are no positions (bottom, left, right or top) defined for that element so it will therefore sit in the position it would sit in without the absolute positioning; all the absolute positioning is doing in this case is taking it out of the normal flow of the page so that it doesn't affect the size of its parent. Try removing the position property and see what happens.

You should also note that, if an absolutely positioned element is not a descendant of a positioned (be it absolute, fixed, relative or sticky) element then its positions are set relative to the viewport.

Upvotes: 15

Sagar Kodte
Sagar Kodte

Reputation: 3815

Absolute - This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself. The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.

In above example there of w3school there is no top bottom left right properties so it will not consider position with body.

Upvotes: 1

Related Questions