Relatively Positioned Parent not working as anchor for Absolutely Positioned Child

Question

Absolutely positioned element is using body element as anchor instead of parent a element

* { box-sizing: border-box }
a { text-decoration: none  }
body { font-family: Calibri; padding-top: 30px; }

#menu {
    border: 1px solid red;
    padding: 10px;
    display: flex;
    flex-flow: row nowrap;
}

#menu > a {
    position: relative;
}

#menu > a, #submenu > a {
    width: 100px;
    line-height: 40px;
    text-align: center;
    background-color: rgb(238, 238, 238);
    border-right: 1px solid black;
}

#menu > a:hover, #submenu > a:hover {
    background-color: #fff;
}

#submenu {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 40px;
}

<div id="menu">
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
        <div id="submenu">
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
        </div>
    <a href="#">Menu Item</a>
</div>

As your `
` is not a child of a `Menu Item`, your rule `#menu > a { position: relative; }` won't have any effect for the `#submenu`'s absolute position. It will in your case relate to the `html` as no other ascendants has a position other than the default `static` — Asons, Aug 07 '18 at 09:29
@LGSon If I put ``
`` inside ``Menu Item``. It has no effect. You can have a look. — Yousuf Iqbal Hashim, Aug 07 '18 at 10:05
No, it won't, and the reason that won't work is because nested `a` (which you'll get when doing that) is invalid, but if you change your outer `a` to e.g. `div` it will. — Asons, Aug 07 '18 at 10:08

score 0 · Answer 1 · answered Aug 07 '18 at 08:52

as per your question absolute-submenu should be within relative-menu3, just fixed the markup, hope this the issue you are facing

* { box-sizing: border-box }
a { text-decoration: none  }
body { font-family: Calibri; padding-top: 30px; }

#menu {
    border: 1px solid red;
    padding: 10px;
    display: flex;
    flex-flow: row nowrap;
}

#menu > a {
    position: relative;
}

#menu > a, #submenu > a {
    width: 100px;
    line-height: 40px;
    text-align: center;
    background-color: rgb(238, 238, 238);
    border-right: 1px solid black;
}

#menu > a:hover, #submenu > a:hover {
    background-color: #fff;
}

#submenu {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 40px;
}

<div id="menu">
    <a href="#">Menu Item</a>
    <a href="#">Menu Item</a>
    <a href="#">
        Menu Item
        <p id="submenu">
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
            <a href="#">Sub Menu</a>
        </p>
    </a>
    <a href="#">Menu Item</a>
</div>

Thanks. But if you see the output of your posted answer. There is no difference between this and mines visually. — Yousuf Iqbal Hashim, Aug 07 '18 at 09:05
Nice to have a down-vote when things work as expected. Added a bit of javascript to this example answer please do check it out before you down-vote. — , Aug 07 '18 at 09:40
Nested `a` is not valid, and as you see, your absolute/relative settings doesn't work properly because of that. Also, why change the `div` to a `p` ? ... A `p` is not an appropriate tag in this markup structure. — Asons, Aug 07 '18 at 10:06

score 0 · Answer 2 · 2018-08-07T10:41:50.363

In your code snippet provided you use only one element with id=submenu but i think if this is a real menu then this is not a correct scenario.

So assuming that your menu will have more than one sub-menus, and without having to change markup to nest the sub-menu inside another element along with it's anchor i have prepared a small snippet for you to check.

Only some minor CSS changes where made to place the sub-menu directly under it's parent anchor.

In the below snippet all anchor elements have a sub-menu so in order to bind anchor and sub-menu data-id attribute was used in anchor and a matching id was used for the sub-menu.

let links = document.querySelectorAll("a");
links.forEach(link => link.addEventListener('click', function(e){
let active = document.querySelectorAll('div.active:not(#'+e.target.dataset.id+')');
active.forEach(function(el) {
if(el.id!==e.target.dataset.id) {el.classList.remove('active');
}
});
let sub = document.getElementById(e.target.dataset.id);
sub.classList.toggle('active');
})
);

* {
  box-sizing: border-box
}

a {
  text-decoration: none
}

body {
  font-family: Calibri;
  padding-top: 30px;
}

.menu {
  border: 1px solid red;
  padding: 10px;
  display: flex;
  flex-flow: row nowrap;
  height: 65px;
}

.menu>a {
  position: relative;
}

.menu>a,
.submenu>a {
  left: 0;
  width: 100px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(238, 238, 238);
  border-right: 1px solid black;
}

.menu>a:hover,
.submenu>a:hover {
  background-color: #fff;
}

.menu>.submenu {
  display: none;
  flex-flow: column nowrap;
  position: relative;
  top: 45px;
  margin-left:-100px; 
}
.menu>.submenu.active {
  display:flex;
}

<div class="menu">
  <a href="#" data-id="sub1">Menu Item</a>
  <div class="submenu" id="sub1">
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
  </div>
  <a href="#" data-id="sub2">Menu Item</a> 
  <div class="submenu" id="sub2">
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
  </div>
  <a href="#" data-id="sub3">Menu Item</a>
  <div class="submenu" id="sub3">
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
  </div>
  <a href="#" data-id="sub4">Menu Item</a>
  <div class="submenu" id="sub4">
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
    <a href="#">Sub Menu</a>
  </div>
</div>

Nandita Sharma · Answer 3 · 2018-08-07T09:22:37.723

Keep the anchor and the dropdown in a span and add the relative class on the span instead of the anchor.

Modified this style too

#menu>a,
#menu>span,
#submenu>a {
  width: 100px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(238, 238, 238);
  border-right: 1px solid black;
}

* {
  box-sizing: border-box
}

a {
  text-decoration: none
}

body {
  font-family: Calibri;
  padding-top: 30px;
}

#menu {
  border: 1px solid red;
  padding: 10px;
  display: flex;
  flex-flow: row nowrap;
}

#menu>span {
  position: relative;
}

#menu>a,
#menu>span,
#submenu>a {
  width: 100px;
  line-height: 40px;
  text-align: center;
  background-color: rgb(238, 238, 238);
  border-right: 1px solid black;
}

#menu>a:hover,
#submenu>a:hover {
  background-color: #fff;
}

#submenu {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  top: 40px;
}

<div id="menu">
  <a href="#">Menu Item</a>
  <a href="#">Menu Item</a>
  <span>
      <a href="#">Menu Item</a>
      <span id="submenu">
          <a href="#">Sub Menu</a>
          <a href="#">Sub Menu</a>
          <a href="#">Sub Menu</a>
          <a href="#">Sub Menu</a>
      </span>
  </span>
  <a href="#">Menu Item</a>
</div>

Thanks a lot. Can you explain me that why my solution doesn't work. Why parent ``a`` element is not behaving as anchor. To my knowledge it should work. This is what I studied online. But its not. Can you explain a bit. — Yousuf Iqbal Hashim, Aug 07 '18 at 09:30

Relatively Positioned Parent not working as anchor for Absolutely Positioned Child

3 Answers3