如何使 Z-index =1 div 占据整个高度
[英]How to make a Z-index =1 div to occupy entire height
问题描述
如图所示，我有一个侧边栏，它使用 z-index = 1 打开其他元素（蓝色）。打开侧边栏时，我不希望用户看到侧边栏以外的任何其他元素。 但是在侧边栏的末尾，我看到了页面的其他元素部分，如图所示（工作表 A、工作表 B）。
我尝试提供 100vh、500vh、100%、auto，但这些都不起作用。 任何让Z-index =1 元素占据整个竖屏的方法
.navigationbar--open .navigationbar__body {
max-height: auto;
opacity: 1;
}
html
<div className="navigationbar--open">
<div className="navigationbar__heading">
<div className="foldersection">
<img src={image} className="navbar__icon" />
</div>
<FaSortDown />
</div>
<div className="navigationbar__body">
<li>Folder A</li>
<li>Folder B</li>
<li>Folder C</li>
))}
</div>
</div>
1 个解决方案
解决方案1
0 2021-11-03 17:41:37
您可以通过组合使用 CSS 属性（例如overflow 、 display 、 height和width来实现此结果。 在我的示例中，我通过将navbar元素的height设置为100vh （垂直视口的 100%）使navbar元素占据整个屏幕，并通过使用overflow-y属性来阻止任何垂直滚动和其他项目的显示hidden 。 当我们单击button元素时，它会将display属性切换为nav元素的flex 。 下面举例。
$('.btn').click(function() { $('nav').toggleClass('open'); });
nav { height:100vh; width:100vw; background:pink; overflow-y:hidden; position:fixed; top:0; left:0; display:none; flex-direction:column; } nav.open { display:flex; } .btn { position:absolute; top:25px;right:25px; z-index:2; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div>some other page content above some other page content above some other page content above some other page content abovesome other page content above</div> <button class='btn'>btn</button> <nav> <span>some nav item 1</span> <span>some nav item 1</span> <span>some nav item 1</span> </nav> <div>some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below</div> <div>some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below</div> <div>some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below</div> <div>some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below some other page content above some other page content above some other page content above some other page content abovesome other page content below</div> </body>
Z索引和高度不适用于我的div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.