Child position absolute parent relative doesn't work

Question

I’m trying to implement something like a web page navbar. I have code like this:

nav {
  position: relative;
  display: inline-block;
}

.nav-right {
  display: inline-block;
  position: absolute;
  right: 0px;
  list-style: none;
}

<nav>
  <h2>My First Website</h2>
  <ul class="nav-right">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

I have known that an absolute element is positioned to its first positioned (not static) ancestor element. I have set position property of element nav as absolute, but it looks like the <ul> run out of the <nav> range. In other word i'm confused about why nav'height is less than ul's Thanks a lot.

try `top : 0px;` with that.IF the top is auto then it defaults to their position — XYZ, Jun 09 '17 at 04:01
I’m not sure I understand everything about your problem, but the last statement sounds like you might need `overflow: hidden;` in `nav`. — Sebastian Simon, Jun 09 '17 at 04:06
Sorry about i didn't describe my problem clearly because my terrible english. `
` truely mean that i have set property position of element nav as absolute.@Xufox — cpprookie, Jun 09 '17 at 06:44
Thanks for editing my question to make it looks better @Xufox — cpprookie, Jun 09 '17 at 06:48

score 2 · Accepted Answer · answered Jun 09 '17 at 04:09

2

Absolute position elements are removed from the document flow. So the parent's height will hold only the other elements. Not the absolute position elements.

If you want your parent to cover your absolute position element then you have to set a fixed height to the parent element. You can set top: 0; like other's have answered. But still your parent's height wont be determined by the absolute positioned element, that's the reason the ul is outside the nav.

answered Jun 09 '17 at 04:09

karthick

11,998
6
56
88

Thanks a lot, this is the answer I'm looking for. By the way, my english is too terrible to describe my confusion clear but you truely understand what i mean. – cpprookie Jun 09 '17 at 07:09

XYZ · Answer 2 · 2017-06-09T04:10:56.890

1

try top : 0px; also with that.If the top is auto then it defaults to their position: static values.Check this for more details:position: absolute without setting top/left/bottom/right?

Also display:block for the nav for the nav to take full sapce

nav {
  position: relative;
  display: block;
}

.nav-right {
  display: inline-block;
  position: absolute;
  top:0px;
  right:0px;
  list-style: none;
}

<nav>
      <h2>My First Website</h2>
      <ul class="nav-right">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>

edited Jun 09 '17 at 04:10

answered Jun 09 '17 at 04:03

XYZ

4,450
2
15
31

I have tried but i found that it looks like element
– cpprookie Jun 09 '17 at 06:59
Thanks XYZ, your code works but @karthick truely point out the core problem so i have to vote him. Thanks again :) – cpprookie Jun 09 '17 at 07:13

score 1 · Answer 3 · answered Jun 09 '17 at 04:10

1

Use display: block; in parent and add top:0; in child to align in right side of parent

nav {
  position: relative;
  display: block;
}

.nav-right {
  display: inline-block;
  position: absolute;
  right: 0px;
  top:0;
  list-style: none;
}

<nav>
  <h2>My First Website</h2>
  <ul class="nav-right">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

answered Jun 09 '17 at 04:10

jafarbtech

6,842
1
36
55

1

Thanks jafarbtech, your code works but @karthick truely point out the core problem so i have to vote him. Thanks again :) – cpprookie Jun 09 '17 at 07:13

Ehsan · Answer 4 · 2017-06-09T04:21:29.820

1

Try This :

nav {
  position: relative;
}

.nav-right {
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  list-style: none;
}

 <nav>
  <h2>My First Website</h2>
  <ul class="nav-right">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

edited Jun 09 '17 at 04:21

answered Jun 09 '17 at 04:14

Ehsan

12,655
3
25
44

Thanks ehsan, your code works but @karthick truely point out the core problem so i have to vote him. Thanks again :) – cpprookie Jun 09 '17 at 07:12

Child position absolute parent relative doesn't work

4 Answers4