0

I have a sidebar with its position set to relative:

.home-left-sidebar,
.home-right-sidebar {
  flex: 1;
  color: rgb(66, 66, 66);
  font-size: 17px;
  position: relative !important;
}

It has a child that is set to fixed:

.left-sidebar {
  position: fixed;
  right: 0;
}

But for some reason the child isn't sticking to the parent div, instead it's sticking to the body.

<div className='home-left-sidebar '>
  <LeftSidebar />
</div>

<div className='left-sidebar'>
      <div className='left-sidebar-items'>
        <ul>
          <NavLink to='/home/popular'>
            <li>Home</li>
          </NavLink>
          <NavLink to='/home/new'>
            <li>Newest</li>
          </NavLink>
          <NavLink to='/home/likes'>
            <li>My Likes</li>
          </NavLink>
          <NavLink to='/home/user/posts'>
            <li>My Posts</li>
          </NavLink>
        </ul>
      </div>
    </div>

I don't know what I'm doing wrong here.

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
Dylan L.
  • 1,243
  • 2
  • 16
  • 35

2 Answers2

5

position:fixed is not relative to parent element, even if it has a position:relative set. It's relative to the viewport. Here is what MDN says about it:

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

You would wanna use position:absolute instead if you want to position relative to parent element.

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
1

fixed will make the child stick to the parent if the parent has for example any sort of transform.

So you could give the parent a 'null' transform like transform: scale(1) and the child will then be stuck to the parent (and scroll with it for example) rather than to the body.

A Haworth
  • 30,908
  • 4
  • 11
  • 14