欢迎访问: www.ptcms.cn
当容器的position属性值为absolute时,这个容器即被绝对定位了。绝对定位在几种定位方法中使用最广泛,这种方法能够很精确地将元素移动到你想要的位置。使用绝对定位的容器前面的或者后面的容器会认为这个层并不存在,即这个容器浮于其他容器上,它是独立出来的,类似于Photoshop软件中的图层。所以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; charset=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容器位置变化。
分享到:
相关推荐
在用DIV+CSS控制排版过程中,定位一直被人认为是一个难点,在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所措,下面的教程能让你更深入地了解CSS定位属性
CSS布局实例[绝对定位:一栏固定,一栏自适应]
/*用绝对定位抽离正常文本流,不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/ top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/ left:5px; } dl { width: 160px; float:right; color: #999; line-...
本文实例讲述了绝对定位元素被遮挡的解决方法。分享给大家供大家参考。具体方法如下: ie7下 绝对定位元素即使z-index值很高,如果其设置相对定位的父元素没有设置z-index值的话,其可能(这种可能性当然是布局存在...
本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下。 一、什么是css sprites css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片...
DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。...
本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。...2.2.3 绝对定位 2.2.4 浮动 2.3 小结 ……
css 3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位。 默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float 具体实例 复制代码代码如下: <html> &...
3.12 绝对定位与相对定位 3.12.1 绝对定位 3.12.2 相对定位 3.12.3 何时选用绝对与相对定位 第4章 CSS网站元素设计 4.1 用CSS设计网站导航 4.1.1 横向导航 4.1.2 纵向导航 4.1.3 下拉及多级弹出式菜单 4.1.4 门户...
实例手把手--DIV+CSS结合.html 演示实例手把手--DIV+CSS结合。 第21章(源代码\第21章) 示例描述:本章演示内补丁用法。 padding基本语法和用法.html 复合属性padding基本语法和用法。 padding-bottom用法....
主要介绍了CSS position属性和实例应用演示,absolute(绝对定位),relative(相对定位),relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下
让DIV重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现。 重叠样式需要主要CSS样式解释 1、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位(可重叠) 3、left ...
定义 一个绝对定位或固定定位元素通过使用属性clip可以改变剪裁区域的形状,但并不改变元素本身的宽高属性 clip 值: rect(top,right,bottom,left) | auto | inherit 初始值: auto 应用于: 绝对定位或固定定位...
我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 ... 绝对定位 使用Flexbox 设定行高(line-height) 设定行高是垂直居中最简单的方式,适用于“单行”的“行
css固定定位,即悬浮效果(例如对联广告),不用js,css中"position:fixed;"即可。position:fixed;...ie 6.0不支持,因此采用相对于html元素的绝对定位。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transiti
CSS用于定义网站的UI和将内容从外观中分离。CSS在几乎所有网站中被广泛应用。让我们花点时间来看看我们编写的样式是否基于比较好的标准。下面的这些技巧将对CSS初学者在开发中有所帮助,对CSS高手或许也将有某些提高...
div重叠 叠加实例 未排层叠顺序 www.divcss5.com</title> <style> .div-relative {position: absolute;color: #000;border: 1px solid #000;width: 500px;height: 400px;right: 0;bottom: 0;} .div-a {...
没有什么技术含量,主要是利用背景色和边框色来渲染每一个像素点,加上绝对定位,就可以变换出不同的风格。在制作一幅图片之前最好是将图片黑白风格化,然后用PS放大图片,将各个点的位置计算精确。剩下的事情就是...