與Ionic中的側邊菜單欄重疊的圖像

Question

我正在建立一個基於IONIC框架的android應用。 我將圖像和陰影分別分為三個部分。 但是側面菜單欄與它們重疊。 我嘗試設置position：relative; 和z-index，但沒有成功。 請幫助我。

圖1.滑動側面菜單之前：

圖2.滑動側面菜單后：

側邊菜單代碼：

 <!--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--> 

卡代碼：

 .container{ padding-top: 20px; padding-left:20px; padding-right:20px; } .card-pic{ margin: 20px 20px 0px 20px; 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; } 

 <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

在您的側面菜單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）:)