如何使粘性div漂浮在页面的其余部分上？

罗德里戈：

我在窗口顶部有一个浮动菜单，仅占据其宽度的1/4。剩余的3/4（以及菜单1/4的后面）应被下一个文档部分中的图像占用。但是，图像最初显示在菜单下方，即菜单未如我所愿地浮动。

我得到的是：

我想要的是：

body,ul {
  margin: 0;
  overflow-x:hidden;
}
header {
  background: green;
}
nav {
  background: #ff000080;
  width: 25vw;
  position: sticky;
  top: 0;
}
main img {
  width: 100vw;
}

<header>Title</header>
<nav>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</nav>
<main>
  <img src='https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg' />
</main>

如何使粘性元素始终浮动，即在其右侧不显示空白？

编辑：图像不能在背景上。它应该在main标记内，那里将有更多元素，包括文本和其他图像。除菜单外，所有菜单均应滚动至顶部。

随同Afif：

您可以考虑使用float和shape-outside技巧来确保元素不占用空间：

body,ul {
  margin: 0;
  overflow-x:hidden;
}
header {
  background: green;
}
nav {
  background: #ff000080;
  width: 25vw;
  position: sticky;
  top: 0;
  float:left;
  shape-outside:linear-gradient(transparent,transparent);
}
main img {
  width: 100%;
}

<header>Title</header>
<nav>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</nav>
<main>
  <img src='https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg' />
</main>

另一个想法是考虑height:0包装

body,
ul {
  margin: 0;
  overflow-x: hidden;
}

header {
  background: green;
}

nav {
  background: #ff000080;
  width: 25vw;
}

.nav {
  position: sticky;
  top: 0;
  float: left;
  height:0;
}

main img {
  width: 100%;
}

<header>Title</header>
<div class="nav">
  <nav>
    <ul>
      <li>link 1</li>
      <li>link 2</li>
      <li>link 3</li>
    </ul>
  </nav>
</div>
<main>
  <img src='https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg' />
</main>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。