关于html图层叠加显示

html-css015

关于html图层叠加显示,第1张

z-index:-1postion:relative

在style里

其中z-index数值越小图层显示越底下,数值越高显示越上层

主要是让button覆盖在input之上,把input设置成透明,我之前做过,和你这个差不多,贴给你,你稍微改动下

<a href="javascript:void(0)">

<div class="fibtn">浏览</div>

<input class="import_file" type="file" name="wm_tssb_ysb_drfk_importFile"

id="wm_tssb_ysb_drfk_importFile" onchange="choose_wm_tssb_ysb_drfk_file(this)"/></a>

浏览字覆盖在input上面,点击浏览会触发onchange事件

.import_file{

position: absolute

margin-left: -70px

width: 60px

height: 30px

opacity: 0

filter: alpha(opacity=0)

}

.fibox{

width: 320px

height: 28px

border: 1px solid #c1c1c1

border-radius: 4px

margin-top: -6px

}

在很多情况下都需要实现两个div的重叠(包含层级关系),实现的方法也和div中属性设置的不同也是不一样的,尤其是 position 和 display 的变化. 但是总体上就是对margin( 盒模型 )和top( 定位 )等的运用。margin是属于盒模型中的一部分,修改了margin,就是修改了div元素的大小,但是修改了定位,只是修改了 自己本身的位置 ,不修改元素占用的大小,也不会干扰其他元素的位置。 1. 但是依靠margin来重叠有很大的 局限性 ,图片如下: 这是设置了 黄色div块的margin-top 才实现的,你也可以设置 蓝色div的margin-bottom。 如果你设置黄色div的margin-bottom就不能实现重叠的效果。 2. 当两个div的position为 relative 时,可以同时使用盒模型和定位来实现重叠。使用定位来选择位置时,优先级为top>bottom,left>right,优先级高的会屏蔽低的。 3. 当两个div的position为 absolute 时,那么父元素必须设置一个 定位 属性(不能为默认的static),这样子div才能相对于父div布局。