我正在使用 Ionic Framework 开发移动/网络应用程序。我正在使用自定义 CSS header 和 ion-slide-box
,自定义寻呼机但希望它与此自定义 header 重叠。
我尝试了所有与定位和 z-index
相关的方法,但我无法在 CSS 形状上显示寻呼机。
代码:
.bandeau
{
position: relative;
top: 0;
height: 70px;
width: 100%;
background-color: #555555;
margin-bottom: 80px;
}
.oval {
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 60% / 30px;
position: absolute;
height: 100px;
width: 100%;
top: 60%;
background-color: #555555;
}
.slider-pager {
display: block;
background-color: white;
position: absolute;
z-index: 1000;
top: -30px;
height: 48px;
}
.slider-pager .slider-pager-page {
position: relative;
background-color: gray;
border-radius: 100%;
max-width: 72px;
width: 48px;
z-index: 10;
height: 100%;
}
.pager-image {
width: 100%;
}
.slider {
height: 100%;
background-color: white;
}
.ion-slide {
background-color: white;
}
<div class="bandeau">
<div class="oval"></div>
</div> <!-- TODO -->
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
<ion-view view-title="Catspads" align-title="left">
<ion-slide-box show-pager="true">
<ion-slide>
<ion-content>
最佳答案
我发现摆脱这种情况的唯一方法是使用 JS 以编程方式将寻呼机移动到较高的 HTML 级别,将其定位在 ion-content
标记之外。 z-index
按预期工作,但找不到更干净的解决方案。
关于html - ionic 元素的 Z 索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36569859/