html - 一次具有两种定位类型的元素

Question

我想要一个元素被定位为粘性(不固定)，因为它在屏幕上 每次滚动时，我们都称它为 menuV，但我也需要它 定位为绝对，因此它不会与 div 交互 坐在它下面，我们称之为待办事项。 “待办事项”div 覆盖了屏幕的整个宽度 (100%) 并位于 “菜单”。

在接下来的代码中，“menuV”将显示为浅蓝色 div，而“todo”div 将显示为灰色 div。

如果我将“menuV”设置为绝对，当我滚动时它不会停留在屏幕上，如果我将它设置为粘性，“待办事项”div 将放置在“menuV”下方，因为它有一个宽度为 100%，所以我需要一种方法来同时设置两个位置。

代码如下:

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

#header {
  width: 100%;
  height: 200px;
  background-color: blueviolet;
  border: 6px solid #5b00b5;
  padding: 0;
}

#div_padre {
  background-color: sandybrown;
  width: 100%;
  border: 6px solid #a86002;
  position: absolute;
}

#menuH {
  position: sticky;
  top: 0;
  height: 50px;
  background-color: royalblue;
  border: 6px solid #0000f5;
}

#menuV {
  width: 50px;
  height: 92vh;
  width: 20%;
  top: 50px;
  position: sticky;
  background-color: #00ffe5;
  border: 6px solid #0079ad;
  float: left;
}

#todo {
  width: 100%;
  background-color: #454545;
  border: 6px solid #000000;
  float: left;
}

<div id="header">HEADER</div>
<div id="div_padre">
  <div id="menuH"></div>
  <div id="menuV"></div>
  <div id="todo">
    <pre style="margin:0;">
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                        asd
                
                </pre>
  </div>
</div>

我一直在做一些研究，我唯一找到的是 this ，这确实是我所需要的，但出于某种原因，我无法像评论中所说的那样将元素的 id 封装在 css 上。

Answer 1

尝试从“todo”div css 中删除左侧的 float 。我认为它应该可以正常工作。 发布调整 menuV div 高度的帖子。目前设置为 92vh。考虑到其他元素的高度，给它一个较低的值。例如:尝试将其降低到 85vh，看看问题是否仍然存在。