css - 如何从固定位置父元素在节外制作固定位置子元素
问题描述
我创建了一个过滤器部分,其中包含的过滤器按钮内部具有固定位置,并且该按钮也固定位置,但我面临的问题是想要在过滤器部分之外显示过滤器按钮。
.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>
解决方案
推荐阅读
- javascript - 重置 react-query useQuery 挂钩以清除呈现页面上的数据
- css - sass SassError 中的 min、max 函数:内部错误:不兼容的单位:
- docker - 如何保持这个交互式 docker swarm 服务运行?
- reactjs - React + Axios:Rest API while 循环所有帖子(来自响应标头的信息)
- mongodb - 如何在 MongoDB 中索引两个数组?错误:无法索引并行数组
- python - 如何用Python在美国地图中用颜色标记州名和年份?
- python - 在 JAX 中使用 VJP 时有没有办法禁用前向评估?
- html - 如何在 Facebook 应用程序中打开网站中的 Facebook 页面链接
- powershell - quser:错误 0x000006AB 枚举会话名称错误
- python - 使用 python 将值列表与 JSON 响应进行比较