Question

我正在构建一个基于IONIC框架的Android应用程序。我在每个部门中制作了三个图像和阴影。但侧面菜单栏与他们一起过度。我试着设定位置：亲戚;和z-index但它没有成功。请帮我这个。

图像1.在滑动侧面菜单之前：

图像2.滑动侧面菜单后：

侧边菜单代码：

＆＃13;

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

＆＃13;

卡＆＃39;代码：

＆＃13;

.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;
	 
}

＆＃13;

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

＆＃13;

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）：）

图像与Ionic中的侧面菜单栏重叠

1 个答案: