CSS层居最顶部

日期:2012-3-7 类型:div+css网站排版技术

层居顶部在很多浏览器中都不兼容。我之前遇到过一个问题,导航放在FLASH上。并且要透明显示。我那时想如果底部是张图片就好办多了。但是客户的想法实在是让我感觉不可思议。必须得找到合理的解决办法。在美工的帮助下我找到了方法。下面把代码给大家分享。

  div2是div1的子对象。若想让子对象适应父对象的高度,首先就要获取父对象的高,才对去适应它。

  div2是层又叠在父对象div1之上的,我们要明确他们的层叠关系。

  好了,有了上面的基本思路,下面我们动手编码:

 

* { margin:0; padding:0;}

body { height:100%; }

#div1{

     position:relative;

     float:left;

     height:100%;   

}

#div2{

     position:absolute;

     width:100%;

     height:100%;

     top:0;

     left:0;

     right:0;

     bottom:0;

     /*background:url(http://www.52css.com/skins/logo3.gif) bottom left no-repeat; */

     z-index:1;

     -moz-opacity:0.5;

     filter:alpha(opacity=50);

     background:#c00;

}

<div id="div1">

     <img src="http://www.52css.com/skins/logo3.gif" />

     <div id="div2">div div2</div>

</div>

结合这个实例你可以很快的找到方法,DIV2这个层最里面要用position:absolute;div1在最外面要用 position:relative;这两个样式是互补的,一定要这样子排,才会兼容所有的IE浏览器。

深圳市蒸蒸科技有限公司

地址:深圳市龙华新区龙观西路2号宝龙大厦915室

手机:15013488376

联系人:商先生

公司网址:http://www.jixingweb.com


响应式网站
兼容手机端、电脑端、微信端
网站转静态开发
打开速度快、安全性高、利于SEO优化
HTML5+CSS3最新技术
采用最新网站排版技术,动态效果更逼真
仿站2500元起
高仿网站、价格便宜、功能齐全