Absolute positioning working without relative positioning in the parent

Asked 1/7, 2016 at 12:3 Answered 1/7, 2016 at 12:9

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>

Depside answered 1/7, 2016 at 12:3 Comment(5)

Tip: avoid using W3Schools as a learning resource. – Bedrail 1/7, 2016 at 12:11

If there is no positioned ancestor, an absolutely positioned element does not use the body as the containing block. It use the initial containing block, which would be the viewport. – Cowlick 1/7, 2016 at 12:18

@Michael_B: Doesn't getting attached to the viewport means that it will essentially be fixed in position? It is right, that in absence of parent positioned block,it uses the initial containing block. But, using viewport seems a bit confusing to me. – Depside 1/7, 2016 at 12:25

drafts.csswg.org/css-position-3/#def-cb – Cowlick 1/7, 2016 at 12:31

w3.org/TR/CSS22/visudet.html#containing-block-details – Cowlick 1/7, 2016 at 12:33

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.

Bedrail answered 1/7, 2016 at 12:9 Comment(5)

I see your point. Just to be double sure, the purpose of using absolute here is to prevent <ul> from taking up more space in height, right? As you have suggested to not use w3schools, is there any alternative way that this can be achieved? Thanks in advance. – Depside 1/7, 2016 at 12:19

Your last paragraph is incorrect on multiple fronts. It doesn't have to be a descendant of a relatively positioned element. The ancestor just needs to be positioned (relative, absolute, fixed or sticky). And it doesn't position relative to body when there is no other positioned ancestor. It uses the initial containing block. – Cowlick 1/7, 2016 at 12:21

In this specific instance, yes that's all the absolute positioning is doing. However, you should always specify your positions to avoid any potential problems, now or in the future. W3Schools is not a well-trusted resource, there are plenty of other, much better resource out there, such as MDN. – Bedrail 1/7, 2016 at 12:22

Sorry, @Michael_B, you are of course correct on your first point - I've had a horrific morning with servers crashing and hard drives failing on me so my brain isn't firing on all cylinders! Could you elaborate on what you mean by "initial containing block" in your second point? – Bedrail 1/7, 2016 at 12:24

D'oh! 2 rookie mistakes in one sentence - think I need to stay off SO for the rest of the day. Thanks for catching those and correcting me. – Bedrail 1/7, 2016 at 12:29

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.

Opossum answered 1/7, 2016 at 12:9 Comment(2)

why this downvote for it can anyone tell or just because of formatting? – Opossum 1/7, 2016 at 12:12

I don't know who down voted your answer, but it might be the case that you have quoted this from some where without citing the source. Thanks for taking up time and answering this though. :) – Depside 1/7, 2016 at 12:27

Recommended topics

Hot tags