css图片叠加和底部定位

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>

让元素定位在容器的底部

高度不定的容器中要想使子元素定位在底部可以使用绝对定位，如果出现宽度异常则补上一个100%

            <div style="position:absolute;bottom: 0px;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>