我创建了一个“过滤器”部分,其中的“过滤器”按钮内部位置固定,该按钮也固定位置,但是我面临的一个问题是要在过滤器部分外部显示过滤器按钮。
.filter-component .filter-panel {
position: fixed;
z-index: 3;
top: 0;
left: 0;
height: 100vh;
width: 22%;
z-index: 1;
background: #254260;
color: white;
padding: 0;
-webkit-box-shadow: 0 0 200px;
box-shadow: 0 0 200px;
overflow: scroll;
}
.filter-component .filter-panel .filter-btn {
position: fixed;
z-index: 4;
top: 0;
bottom: 0;
left: 0;
margin: auto 0;
width: 190px;
height: 190px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.filter-component .filter-panel .filter-btn button {
padding: 20px;
border: 0;
background: black;
color: white;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
}
.filter-component .filter-panel .panel-heading{
padding: 10px 15px;
background : #142f4b;
text-align: center;
}
<div class="filter-component" id="sidebar">
<div class="filter-panel " role="tablist">
<div class="filter-btn">
<button>Show Filter</button>
</div>
<div class="panel-heading" role="tab"><div class="panel-title text-white d-flex flex-nowrap align-items-center">Filter Your Search</div></div>
</div>
</div>