同时具有两种定位的元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了同时具有两种定位的元素相关的知识，希望对你有一定的参考价值。
我希望元素在屏幕上定位为粘性（不固定）每次滚动时，都将其称为menuV，但我也需要它定位为绝对值，因此它不会与坐在它的下面，我们称之为todo。 “ todo” div覆盖屏幕的整个宽度（100％），位于屏幕下方“ menuV”。
在下一个代码中，“ menuV”将显示为浅蓝色div，“ todo” div将显示为灰色div。
如果将“ menuV”设置为绝对值，则在滚动时它不会停留在屏幕上；如果将其设置为粘滞状态，则“ 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，这确实是我所需要的，但是由于某些原因，我无法像在注释中所说的那样将css元素的id封装起来。
答案
[尝试删除“ todo” div css中剩余的浮点数。我认为那应该可以。发布用于调整menuV div高度的帖子。当前设置为92vh。记住其他元素的高度，给它一个较低的值。例如：尝试将其降低到85vh，看看问题是否仍然存在。
另一答案
所以我终于找到了解决方案：
- 首先，我创建了一个新的div（红色的），然后在其中放入了“ menuV”和“ menuH”。然后，我将此新的div设置为粘性位置，将“ menuV”设置为绝对位置。我这样做是为了使“ menuV”同时具有粘性和绝对性，因此它不会破坏棕色div的流程。
- [第二，因为棕色div不能调整到“ todo”高度，因为“ todo” div也具有绝对位置，所以我创建了一个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>以上是关于同时具有两种定位的元素的主要内容，如果未能解决你的问题，请参考以下文章
如何查询具有基数的表以显示所有 Pk，同时还显示具有 FK 的表中的匹配元素