位置固定的元素不会粘附到位置设置为相对的父元素

Question

我有一个侧边栏，其位置设置为相对：

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

它有一个设置为固定的子项：

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

但由于某种原因，孩子并没有粘在父 div 上，而是粘在了 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>

我不知道我在这里做错了什么。

Answer 1

position:fixed与父元素无关，即使它有一个position:relative集合。它是相对于视口的。MDN 对此是这么说的：

该元素将从正常文档流中删除，并且不会在页面布局中为该元素创建空间。它相对于viewport建立的初始包含块进行定位，除非其祖先之一将、或属性设置为 none 以外的值（请参阅CSS Transforms Spec），在这种情况下，祖先表现为包含块。（请注意，浏览器与透视图和过滤器不一致会导致包含块形成。）其最终位置由、、和的值确定。transformperspectivefiltertoprightbottomleft

position:absolute如果您想相对于父元素定位，您可能需要使用它。