0
我正在构建基于IONIC框架的android应用程序。 我制作了3个部门,每个部门都有图像和阴影。 但侧面的菜单栏与他们打成一片。 我试过设置位置:相对;和z-索引,但它没有解决。 请帮助我解决这个问题。Ionic与侧面菜单栏重叠的图像
图片之前1.滑动侧菜单:
侧菜单代码:
<!--SIDE MENU BAR STARTS -->
<ion-side-menu side="left">
<ion-content>
<ion-list>
<ion-item class="item-avatar-left"> <img src="/img/6.jpg">
<h1 id="menu-left-header-id">Hi REX !</h1>
<span class="badge badge-positive">18</span>
</ion-item>
<progress max="100" value="50"> </progress>
<a class="item item-icon-left" href="#/app/home">
<i class="icon ion-android-notifications-none" ></i>
Notifications
</a>
<a class="item item-icon-left" href="#/app/tutorials">
<i class="icon ion-monitor"></i>
Tutorials
</a>
<a class="item item-icon-left" href="#/app/practice/">
<i class="icon ion-ios-game-controller-b" ></i>
Practice
</a>
<a class="item item-icon-left" href="#/app/playlists/">
<i class="icon ion-android-create" ></i>
Tests
</a>
<a class="item item-icon-left" href="#/app/settings/">
<i class="icon ion-gear-a" href="#/app/settings" ></i>
Settings
</a>
<a class="item item-icon-left" href="#/app/playlist">
<i class="icon ion-android-document" ></i>
Documents
</a>
<a class="item item-icon-left" href="#/app/playlist">
<i class="icon ion-code" ></i>
About
</a>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<!-- SIDE MENU BAR ENDS-->
影像2的滑动侧菜单后
卡代码:
.container{
\t padding-top: 20px;
\t padding-left:20px;
\t padding-right:20px;
}
.card-pic{
margin: 20px 20px 0px 20px;
\t box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
img{
max-width: 100%;
height: auto;
\t
}
<div class="container">
<div class="card-pic item item-image">
<img class="card-img" src="img/phy.png">
</div></br>
<div class="card-pic item item-image">
<img class="card-img" src="img/maths.jpg">
</div></br>
<div class="card-pic item item-image">
<img class="card-img" src="img/chem.jpg">
</div>
</div>
尝试将这些图像放在离子内容而不是div –
仍然无法正常工作。 – Deceptor