css圖片疊加和底部定位

css圖片疊加

兩張圖片需要疊在一起顯示，如何定位

1. 容器先對定位
2. 第一張圖片正常擺放
3. 第二張圖片絕對定位，top:0px
4. 這樣便實現了兩張圖片疊加在一起了，設置z-index改變疊加順序

            <div style="position: relative;">
                <img class="wheel" style="" width="100%" src="img/lucky.gif" alt="" />
                <img style="position:absolute;z-index: 999;top: 0px;" width="100%" src="img/pin.png" alt="" />
            </div>

讓元素定位在容器的底部

高度不定的容器中要想使子元素定位在底部可以使用絕對定位，如果出現寬度異常則補上一個width:100%

            <div style="position:absolute;bottom: 0px;width:100%;">
                <cell title="注冊" style="text-align: center;background-color:#1FBAC9;" @click="this.$root.goNext('Reg1')"></cell>
                <cell title="登錄" style="text-align: center;background-color:#E8D353;" @click="this.$root.goNext('Login')"></cell>
            </div>