css图片叠加和底部定位

css图片叠加和底部定位

css图片叠加

两张图片需要叠在一起显示，如何定位

容器先对定位

第一张图片正常摆放

第二张图片绝对定位，top:0px

这样便实现了两张图片叠加在一起了，设置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>