如何解决模态叠加问题
首先,请原谅我不符合要求的解释,因为这是我在该平台上的第一篇文章,那么,我正在研究叠加层,必须在页面的右侧显示例如416px的宽度和高度的100vh,但是如果我减小浏览器窗口的大小,事情就会被削减,而当我减小浏览器窗口的大小时,底部的按钮开始出现在叠加层的内容上,即使在高度越来越低,这是我的代码,如下所示:
.advanced-overlay {
width: 100%;
min-height: 100vh;
background-color: rgba(35,18,0.5);
position: fixed;
z-index: 100002;
top: -41px;
left: 0;
bottom: 0;
.advance-overlay-footer {
display:flex;
justify-content: space-between;
align-items:center;
position: fixed;
right: 24px;
width:156px;
bottom: 24px;
height:6%;
}
.advanced-overlay-content {
position: relative;
// min-height: 83vh;
width: 416px;
margin-top: 108px;
margin-left: auto;
margin-right: 6px;
opacity: 1;
z-index: 100004;
border-radius: 16px 16px 16px 16px;
background-color: #f5f4f6;
box-shadow: 0 2px 30px 0 rgba(0,0.07),0 19px 18px 0 rgba(0,0.05),0 8px 12px 0 rgba(0,0 1px 5px 0 rgba(0,0.04),0 0 2px 0 rgba(0,0.03);
.close-advance-overlay {
position: absolute;
background-color: #fff;
width: 110px;
height: 40px;
display: flex;
border-radius: 20px;
padding: 5px 22px;
top: -18px;
right: 155px;
opacity: 1;
cursor: pointer;
img {
height: 20px;
width: 20px;
align-self: center;
}
.button-text {
align-self: center;
margin-left: 5px;
font-weight: 600;
font-size: 16px;
color: #000000;
}
}
.advnaced-overlay-content-secion {
//min-height:89vh;
width: 100%;
bottom:10%;
// height:100vh;
.select-box {
margin-top: 40px;
margin-bottom: 40px;
}
.accordinan-filter {
margin-bottom: 24px;
}
.accordian-title {
font-weight: 900;
}
.accordian-content {
margin: 0;
font-size: 16px;
}
}
}
}
.is-maximum {
height: 73vh;
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 4px;
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #d3d3d3;
}
}
<div class="advanced-overlay" v-if="toggleFilter">
<div class="advanced-overlay-content">
<div class="close-advance-overlay" @click="toggleAdvanceFilterOverlay">
<img class src="../assets/icons/close.svg" />
<span class="button-text">Close</span>
</div>
<div class="advnaced-overlay-content-secion is-maximum">
<div class="select-box"></div>
<div class="accordinan-filter"></div>
</div>
<div class="advance-overlay-footer">...two buttons</div>
</div>
</div>
所以,我最终想要实现的是,我想在浏览器窗口的右侧进行响应式叠加,前提是如果我要降低浏览器的高度,则底部的按钮应保持在该位置(固定位置)和内容应该在.advnaced-overlay-content-secion的范围内
解决方法
对于响应式设计,我建议您仔细阅读网格的使用,尤其是对于移动设计,还应使用@media断点。
要使某些东西停留在底部,只需使用: 位置:固定; 底部:0;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。