Ionic與側面菜單欄重疊的圖像

Question

我正在構建基於IONIC框架的android應用程序。 我製作了3個部門，每個部門都有圖像和陰影。 但側面的菜單欄與他們打成一片。 我試過設置位置：相對;和z-索引，但它沒有解決。 請幫助我解決這個問題。

圖片之前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>

Answer 1

使用此在您的sidemenu HTML

<ion-side-menus enable-menu-with-back-views="false"> 
<ion-side-menu-content> 
    <ion-nav-bar class="bar-stable"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
    <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
     </button> 
    </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent"></ion-nav-view> 
</ion-side-menu-content> 
<ion-side-menu side="left"> 
    <ion-header-bar class="bar-stable"> 
    <h1 class="title">Left</h1> 
    </ion-header-bar> 
    <ion-content> 
    <ion-list> 
     <ion-item class="item-avatar-left"> 
      <img src="img/img.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> 

希望它會爲工作喲ü，它爲我工作（y）:)