css绝对定位:CSS绝对定位方法实例来源: 发布时间:星期四, 2009年2月12日 浏览:305次 评论:0
当容器  position属性值为absolute时 这个容器即被绝对定位了 绝对定位在几种定位思路方法中使用最广泛这种思路方法能够很精确地将元素移动到你想要位置使用绝对定位容器前面或者后面容器会认为这个层并不存在即这个容器浮于其他容器上它是独立出来类似于Photoshop软件Software中图层所以position:absolute用于将 个元素放到固定位置非常方便当有多个绝对定位容器放在同 个位置时显示哪个容器内容呢？类似于Photoshop图层有上下关系绝对定位容器也有上下关系在同个位置只会显示最上面容器在计算机显示中把垂直于显示屏幕平面方向称为z方向CSS绝对定位容器z-index属性对应这个方向z-index属性值越大容器越靠上即同个位置上2个绝对定位容器只会显示z-index属性值较大— 注意:当容器都没有设置z-index属性值时 默认后面靠后容器z值大于前面绝对定位容器如果对容器设置了绝对定位 默认情况下容器将紧挨着其父容器对象左边和顶边即父容器对象左上角定位思路方法为在CSS中设置容器top(顶部)、bottom(底部)、left(左边)和right(右边)值这4个值参照对象是浏览器4条边在D:\web\目录下创建网页文件(XHTML1.0)命名为pos_ab.htm编写pos_ab.htm文件代码如代码11.20所示代码11.20 CSS绝对定位:pos_ab.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char  =gb2312" /><title>无标题文档</title> <style type="text/css"> *{margin: 0px; padding:0px;} #all{height:1200px; width:500px; margin-left:20px; background-color:#eee;} #fixed,#fixed2,#fixed3,#fixed4,#fixed5{width:120px; height:50px; border:5px double #000; position:absolute;} #fixed{top:10px; left:10px; background-color:#9c9;} #fixed2{top:20px; left:50px; background-color:#9cc;} #fixed3{bottom:10px; left:50px; background-color:#9cc;} #fixed4{top:10px; right:50px; z-index:10; background-color:#9cc;} #fixed5{top:20px; right:90px; z-index:9; background-color:#9c9;} #a,#b,#c{width:300px; height:100px; border:1px solid #000; background-color:#ccc;} </style></head> <body> <div id="all"> <div id="fixed1">第1个固定 div容器</div><div id="fixed2">第2个固定 div容器</div><div id="fixed3">第3个固定 div容器</div><div id="fixed4">第4个固定 div容器</div><div id="fixed5">第5个固定 div容器</div><div id="a">第1个无定位 div容器</div><div id="b">第2个无定位 div容器</div><div id="c">第3个无定位 div容器</div></div> </body> </html> 笔者给外部div设置了#eee背景色 并给内部无定位div设置了#ccc背景色而绝对定位div容器设置了#9c9和#9cc背景色并设置了double类型边框在浏览器地址栏输入http://localhost/pos_ab.htm浏览效果如图11.23所示 图11.23 CSS绝对定位 从本例可看到 设置top、bottom、left和right其中至少种属性后5个绝对定位div容器彻底摆脱了其父容器(id名称为all)束缚独立地漂浮在上面而在未设置z-index属性值时第2个绝对定位容器显示在第1个绝对定位容器上方(即后面容器z-index属性值较大)相应地第5个绝对定位容器虽然在第4个绝对定位容器后面但由于第4个绝对定位容器z-index值为10第5个绝对定位容器z-index值为9所以第4个绝对定位容器显示在第5个绝对定位容器上方— 介绍说明:读者可以随意拖动浏览器 窗口大小观察绝对定位div容器位置变化0
相关文章读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
