同时具有两种定位的元素答案

【问题标题】：Element with two types of positioning at once同时具有两种定位的元素
【发布时间】：2019-12-18 01:12:19
【问题描述】：

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

在下一个代码中，“menuV”将显示为浅蓝色 div，“todo” div 将显示为灰色 div。

如果我将“menuV”设置为absolute，当我滚动时它不会停留在屏幕上，如果我将它设置为sticky，“todo” 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，这确实是我需要的，但是由于某种原因，我不能像他们在 cmets 中所说的那样将元素的 id 封装在 css 上.

【问题讨论】：

尝试从“todo” div css 中删除 float:left。我认为它应该可以正常工作。
这行得通，但是“todo” div 中的文本不断被“menuV” div 向右推，因为它不是绝对定位。
好的。让我检查你的代码。将制定一个准确的答案，然后发布。

标签： html css

【解决方案1】：

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

【讨论】：

例如，如果我将“menuV”的高度设置为 10vh，则“todo”div 的元素会被推到右侧，直到它们到达“menuV”div 的同一底部，然后他们不再受到“menuV” div 的影响。
对不起，你能试着重新设计一下吗？我没听懂你的问题？
是的，抱歉。你说的第一件事有效（删除浮动：左；），但第二件事没有，因为我放在“待办事项”div中的文本被推到了右边。如果向下滚动，您将看到文本如何先显示在右侧，然后显示在左侧。
那么会发生什么，正如您所看到的，menuV div 滑到了 todo div 的顶部（即两个 div 重叠）。您可以做的是，正如您给 menuV宽度为 20%，您可以为待办事项 div 提供 20% 的左边距。然后它将被放置在您的 menuV div 附近。这将避免 div 重叠。然后，您可以根据自己的喜好对齐待办事项 div 中的文本。如果您想将待办事项 div 中的文本居中对齐，还建议您使用 text-align:center。
如果您不想让文本中心对齐但想要一些其他间距，请改用填充。避免使用空格来对齐您的内容。

【解决方案2】：

所以我终于找到了解决办法：

首先，我创建了一个新的 div（红色的），并将“menuV”和“menuH”放入其中。然后我将这个新的 div 设置为粘性位置，并将“menuV”设置为绝对位置。我这样做是为了让“menuV”同时具有粘性和绝对性，因此它不会破坏棕色 div 的流动。
其次，由于“todo”div 也有绝对位置，棕色 div 没有调整到“todo”高度，我创建了一个 JavaScript 函数来设置棕色 div 高度与红色 div + 灰色相同div，所以现在红色的 div 可以在棕色 div 内的位置粘着移动。

在这里你可以看到新的代码：

function menu_vertical() {
        var x = document.getElementById("menuV");
        var y = document.getElementById("todo");

    
        if (x.style.display === "block") {
            x.style.display = "none";
        } else {
            x.style.display = "block";
        }
    }

    var padre=document.querySelector('#div_padre');
    var contenido=document.querySelector('#todo');
    var menus = document.querySelector('#menusHyV');

    padre.style.height=contenido.offsetHeight + menus.offsetHeight + 'px';

*{
            box-sizing: border-box;
        }
        html, body{
            height: 100%;
            margin: 0;     
        }

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

        #menusHyV{
            position: sticky;
            top:0;
            background-color: crimson;
            border: 6px solid red;
            z-index: 1;
        }

        #menuH{
            top:0;
            height: 50px;
            width: 100%;
            z-index: 1;
            background-color: royalblue;
            border: 6px solid #0000f5;
        }

        #menuV{
            width: 20%;
            display:none;
            background-color: #00ffe5;
            border: 6px solid #0079ad;
            position: absolute;
        }

        #todo{
            width: 100%;
            background-color: #454545;
            border: 6px solid #000000;
            z-index: 0;
            position:absolute;
        }

    <div id="div_padre">
        <div id="menusHyV">
            <div id="menuH"><button onclick="menu_vertical()">Boton</button></div>
            <div id="menuV"><p>asdasds</p><p>asdasds</p></div>
        </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 post 找到解决方案非常有用。

【讨论】：