ionic之搜索框浮动在轮播图片上

叁歲伎倆 2022-07-19 02:38 127阅读 0赞

### 实现效果 ###

![这里写图片描述][20160809161416248]

### 实现代码 ###

html代码

<div class="articleHeader">
          <div class="search">
            <ion-item ui-sref="tabsController.searchPage" id="articlePage-button10" class="item" style="opacity:0.7;background-color: #374953;border-radius: 40px;height: 32px;width: 70%;margin-left:15%">
              <i class="ion-search" style="padding-left: 5px"></i>
              <i style="padding-left: 15px">请输入关键字进行查询</i>
            </ion-item>
          </div>
          <div class="coverFlow" style="background-color: #0a9dc7">
            <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000 show-pager="true" pager-click="pageClick(index)" active-slide="model.activeIndex" delegate-handle="delegateHandler" ng-click="coverFlowClick()">
              <ion-slide>
                <div class="box">
                  <img src="http://img9.tu11.com:8080/picture/121022/pic5/14.jpg">
                </div>
              </ion-slide>
              <ion-slide>
                <div class="box">
                  <img src="http://down77.yousiji.com/uploads1/allimg/c101123/12Z4Qc10S10-193502.jpg">
                </div>
              </ion-slide>
              <ion-slide>
                <div class="box">
                  <img src="http://img.mm522.net/flashAll/20120206/13285185634aUfhU.jpg">
                </div>
              </ion-slide>
            </ion-slide-box>
          </div>
        </div>

css代码

.articleHeader { position: relative; width: 100%; height: 200px; }
    
    .articleHeader .search { position: absolute; z-index: 3; width: 100%; height: 32px; left: 0px; top: 0px; }
    
    .articleHeader .coverFlow { position: absolute; z-index: 2; width: 100%; height: 100%; left: 0px; top: 0px; }

### 讲解 ###

其主要就是应用了z-index的属性以及position：相对位置和绝对位置的关系，实现了两个div覆盖的效果。

网上大部分人给的做法都是用style里面的float方法，`style = "float:left or right"` 来实现两个div覆盖的效果，这种效果想要实现居中覆盖就非常麻烦。

说的非常简单，如有不明或不对之处，敬请指教~

[20160809161416248]: /images/20220718/844a2ae8304344a1b5e8a9beb45d7a82.png