【问题标题】：Sticky div with right: 0 css右侧的粘性 div：0 css
【发布时间】：2022-02-16 12:48:31
【问题描述】：

我正在尝试将我的 div 与我的“导航”中的“菜单”类 div 一起定位。我希望它出现在我的导航中最正确的位置，但也让我的“菜单”div 保持粘性，以便当我向上/向下滚动时，它会滚动。当视口的宽度低于约 1020 像素时，这很好，但任何高于我似乎都无法让它工作的东西。有人可以帮帮我吗？

注意：我不希望我的整个导航栏移动，只有显示“Div 应该留在导航栏内，右侧：0”的 div

HTML/CSS 代码：

<html>
    <head>
        <style>
            .navbar {
                margin: 0 auto;
                max-width: 976px;
                background: red;
                align-items: flex-start;
            }

            .logo {
                color: rgb(184, 8, 8);
                top: 3.8rem;
                grid-column: 1;
                font-size: 2rem;
                font-weight: bold;
                height: 3rem;
                background-color: black;
            }

            .menu {
                color: white;
                position: fixed;
                z-index: 4;
                right: 0;
                margin-right: 0;
                padding-bottom: 1rem;
                top: 2.8rem;
                background-color: black;
            }
        </style>
    </head>
    <body>
        <nav class="navbar">
            <div class="logo">Logo</div>
            <div class="menu">
                Div Should stay inside navbar with right: 0
            </div>
        </nav>

      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
      <div>dummy</div>
    </body>
</html>

【问题讨论】：

position: fixed 元素相对于视口定位，与父级的位置无关。匹配它们的水平轴的唯一方法是使用 JavaScript。还有position: sticky，它可以在一个轴上相对于父元素，而在另一个轴上相对于视口，但它不会超出父元素的范围。

标签： html css sass menu position

【解决方案1】：

这是你想要的结果吗？

.navbar {
    margin: 0 auto;
    max-width: 976px;
    background: red;
    align-items: flex-start;
    position:relative;
}

.logo {
    color: rgb(184, 8, 8);
    top: 3.8rem;
    grid-column: 1;
    font-size: 2rem;
    font-weight: bold;
    height: 3rem;
    background-color: black;
}

.menu {
    color: white;
    position: absolute;
    z-index: 4;
    right: 0;
    margin-right: 0;
    padding-bottom: 1rem;
    top: 0px;
    background-color: black;
}

<html>

<body>

    <nav class="navbar">
        <div class="logo">Logo</div>
        <div class="menu">
            Div Should stay inside navbar with right: 0
        </div>
    </nav>

  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
  <div>dummy</div>
</body>
</html>

【讨论】：

@Mohammed 如果有帮助，您能否将此解决方案标记为正确？

【解决方案2】：

当您在顶部滚动时，我只移动右侧 0 的 div 应该留在导航栏中。我猜您只想将顶部栏固定为带有菜单类的 div。也许它会在某些方面对您有所帮助。

.navbar {
  margin: 0 auto;
  /* max-width: 976px; */
  /* width: 75%; */
  background: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: rgb(184, 8, 8);
  top: 3.8rem;
  grid-column: 1;
  font-size: 2rem;
  font-weight: bold;
  height: 3rem;
  background-color: black;
}

.menu {
  color: white;
  margin-right: 0;
  padding-bottom: 1rem;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 0%;
  margin-right: 0.7em;
}

main {
  padding-top: 5em;
}

/* added by editor to shorten HTML code */
main div {
  height: 750vh;
}

<nav class="navbar">
  <div class="logo">Logo</div>
  <div class="menu">Div Should stay inside navbar with right: 0</div>
</nav>
<main>
  <div>dummy</div>
</main>

【讨论】：

【解决方案3】：

我已评论两行并将background-color 更改为蓝色（不是解决方案）在下面运行并检查

.navbar {
  margin: 0 auto;
  max-width: 976px;
  background: red;
  align-items: flex-start;
}

.logo {
  color: rgb(184, 8, 8);
  top: 3.8rem;
  grid-column: 1;
  font-size: 2rem;
  font-weight: bold;
  height: 3rem;
  background-color: black;
}

.menu {
  color: white;
  position: fixed;
  z-index: 4;
  /*right: 0;*/
  margin-right: 0;
  padding-bottom: 1rem;
  /*top: 2.8rem;*/
  background-color: blue;
}

<nav class="navbar">
  <div class="logo">Logo</div>
  <div class="menu">
    Div Should stay inside navbar with right: 0
  </div>
</nav>

<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>

如您所见，主要问题是分区不是水平堆叠/对齐的，而是垂直的！

解决办法

是水平对齐div，有flex,row和一些margin的东西

.navbar {
  margin: 0 auto;
  max-width: 976px;
  background: red;
  display: flex;
  flex-direction: row;/*horizontal*/
  background-color: black;/*fill empty space*/
}

.logo {
  color: rgb(184, 8, 8);
  top: 3.8rem;
  font-size: 2rem;
  font-weight: bold;
  height: 3rem;
  background-color: black;
}

.menu {
  color: white;
  z-index: 4;
  margin-right: 0;
  margin-left: auto;/*for alignment in right side*/
  padding-bottom: 1rem;
  background-color: black;
}

<nav class="navbar">
  <div class="logo">Logo</div>
  <div class="menu">
    Div Should stay inside navbar with right: 0
  </div>
</nav>

<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>
<div>dummy</div>

我想通知您css Flex Tool，为您未来的 Web 开发尝试该网站！

P.S 如果你不明白代码的目的你可以通过注释来理解代码行

【讨论】：