CSS相对定位,固定定位,绝对定位实例方法和实例
1CSS相对定位方法实例:
当容器的position属性值为relative时，这个容器即被相对定位了。相对定位和其他定位相似，也是独立出来浮在上面。不过相对定位的容器的top（顶部）、bottom（底部）、left（左边）和right（右边）属性参照对象是其父容器的4条边（可认为是自身本应在的位置） ，而不是浏览器窗口，并且相对定位的容器浮上来后，其所占的位置仍然留有空位，后面的无定位容器仍然不会“挤”上来。在D:/web/目录下创建网页文件（XHTML1.0），命名为pos_rel.htm，编写pos_rel.htm文件代码如代码11.22所示。
Www.Svn8.Com
代码11.22 CSS相对定位：pos_rel.htm Svn中文网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
参考资料:www.svn8.com
<html xmlns="http://www.w3.org/1999/xhtml"> 参考资料:www.svn8.com
<head>
Svn8.Com
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 参考资料:www.svn8.com
<title>CSS相对定位</title>
Svn8.Com
<style type="text/css">
Svn中文网
*{margin: 0px; 参考资料:www.svn8.com
padding:0px;}
Www.Svn8.Com
#all{width:400px;
参考资料:www.svn8.com
height:400px; Bbs.Svn8.Com
background-color:#ccc;} Svn8.Com
#fixed{width:100px;
Svn8.Com
height:80px; 参考资料:www.svn8.com
border:15px ridge #f00; Svn8.Com
background-color:#9c9;
Bbs.Svn8.Com
position:relative; Svn中文网
top:20px; Svn8.Com
left:20px;}
参考资料:www.svn8.com
#a,#b{width:200px;
Svn中文网
height:120px; Bbs.Svn8.Com
background-color:#eee;
Svn中文网
border:2px outset #000;} Svn8.Com
</style></head>
Svn中文网
<body>
Svn8.Com
<div id="all">
参考资料:www.svn8.com
<div id="a">第1个无定位的div容器</div> Bbs.Svn8.Com
<div id="fixed">相对定位的容器</div>
参考资料:www.svn8.com
<div id="b">第2个无定位的div容器</div> Svn中文网
</div>
参考资料:www.svn8.com
</body>
Svn8.Com
</html>
参考资料:www.svn8.com
笔者给外部div设置了#ccc背景色，并给内部无定位的div设置了#eee背景色，而相对定位的div容器设置了#9c9背景色，并设置了inset类型的边框。在浏览器地址栏输入http://localhost/pos_相对.htm，浏览效果如图11.25所示。
Svn8.Com
参考资料:www.svn8.com
图11.25 CSS相对定位
Www.Svn8.Com
相对定位的容器其实并未完全独立，浮动范围仍然在父容器内，并且其所占的空白位置仍然有效地存在于前后两个容器之间。
Www.Svn8.Com
CSS固定定位方法实例 Bbs.Svn8.Com
当容器的position属性值为fixed时，这个容器即被固定定位了。固定定位和绝对定位非常类似，不过被定位的容器不会随着滚动条的拖动而变化位置。在视野中，固定定位的容器的位置是不会改变的。在D:/web/目录下创建网页文件（XHTML1.0），命名为pos_fix.htm，编写pos_fix.htm文件代码如代码11.21所示。
参考资料:www.svn8.com
代码11.21 CSS固定定位：pos_fix.htm
Bbs.Svn8.Com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Svn8.Com
<html xmlns="http://www.w3.org/1999/xhtml"> Bbs.Svn8.Com
<head>
参考资料:www.svn8.com
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> Www.Svn8.Com
<title>CSS固定定位</title> Www.Svn8.Com
<style type="text/css">
Svn中文网
*{margin: 0px; Www.Svn8.Com
padding:0px;} 参考资料:www.svn8.com
#all{width:400px;
Svn8.Com
height:1200px; Svn8.Com
background-color:#ccc;} Bbs.Svn8.Com
#fixed{width:100px;
参考资料:www.svn8.com
height:80px;
Bbs.Svn8.Com
border:15px outset #f00;
Svn8.Com
background-color:#9c9; Svn中文网
position:fixed; Svn中文网
top:20px;
Www.Svn8.Com
left:10px;}
Svn中文网
#a{width:200px; Bbs.Svn8.Com
height:300px; Svn8.Com
margin-left:20px; Www.Svn8.Com
background-color:#eee; Bbs.Svn8.Com
border:2px outset #000;}
Svn中文网
</style></head> Svn中文网
<body> Svn8.Com
<div id="all">
Bbs.Svn8.Com
<div id="fixed">固定的容器</div> Bbs.Svn8.Com
<div id="a">无定位的div容器</div>
Svn中文网
</div> Www.Svn8.Com
</body>
参考资料:www.svn8.com
</html> Svn8.Com
笔者给外部div设置了#ccc背景色，并给内部无定位的div设置了#eee背景色，而固定定位的div容器设置了#9c9背景色，并设置了outset类型的边框。在浏览器地址栏输入http://localhost/pos_fix.htm，浏览效果如图11.24所示。
参考资料:www.svn8.com
读者可以尝试拖动浏览器的垂直滚动条，固定容器不会有任何位置改变。不过IE6.0版本的浏览器不支持fixed值的position属性，所以网上类似的效果都是采用JavaScript脚本编程完成的。
Svn8.Com
Svn中文网
图11.24 CSS固定定位 参考资料:www.svn8.com
CSS绝对定位方法实例
Www.Svn8.Com
当容器的position属性值为absolute时，这个容器即被绝对定位了。绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地将元素移动到你想要的位置。使用绝对定位的容器前面的或者后面的容器会认为这个层并不存在，即这个容器浮于其他容器上，它是独立出来的，类似于Photoshop软件中的图层。所以position:absolute用于将一个元素放到固定的位置非常方便。 参考资料:www.svn8.com
当有多个绝对定位容器放在同一个位置时，显示哪个容器的内容呢？类似于Photoshop的图层有上下关系，绝对定位的容器也有上下的关系，在同一个位置只会显示最上面的容器。在计算机显示中把垂直于显示屏幕平面的方向称为z方向，CSS绝对定位的容器的z-index属性对应这个方向，z-index属性的值越大，容器越靠上。即同一个位置上的2个绝对定位的容器只会显示z-index属性值较大的。
Bbs.Svn8.Com
— 注意：当容器都没有设置z-index属性值时，默认后面的靠后的容器z值大于前面的绝对定位的容器。 参考资料:www.svn8.com
如果对容器设置了绝对定位，默认情况下，容器将紧挨着其父容器对象的左边和顶边，即父容器对象左上角。定位的方法为在CSS中设置容器的top（顶部）、bottom（底部）、left（左边）和right（右边）的值，这4个值的参照对象是浏览器的4条边。在D:/web/目录下创建网页文件（XHTML1.0），命名为pos_ab.htm，编写pos_ab.htm文件代码如代码11.20所示。 参考资料:www.svn8.com
代码11.20 CSS绝对定位：pos_ab.htm Svn8.Com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Bbs.Svn8.Com
<html xmlns="http://www.w3.org/1999/xhtml"> Svn8.Com
<head>
Svn8.Com
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> Svn8.Com
<title>无标题文档</title>
Svn8.Com
<style type="text/css">
Svn8.Com
*{margin: 0px;
Svn8.Com
padding:0px;}
Bbs.Svn8.Com
#all{height:1200px; Www.Svn8.Com
width:500px; 参考资料:www.svn8.com
margin-left:20px; Svn中文网
background-color:#eee;} Svn中文网
#fixed,#fixed2,#fixed3,#fixed4,#fixed5{width:120px; 参考资料:www.svn8.com
height:50px; Www.Svn8.Com
border:5px double #000; Www.Svn8.Com
position:absolute;} Www.Svn8.Com
#fixed{top:10px;
Svn中文网
left:10px;
参考资料:www.svn8.com
background-color:#9c9;}
Svn中文网
#fixed2{top:20px; Www.Svn8.Com
left:50px; Bbs.Svn8.Com
background-color:#9cc;}
Svn中文网
#fixed3{bottom:10px; Svn中文网
left:50px; Bbs.Svn8.Com
background-color:#9cc;} Svn中文网
#fixed4{top:10px;
Svn8.Com
right:50px;
Svn中文网
z-index:10; Bbs.Svn8.Com
background-color:#9cc;}
Www.Svn8.Com
#fixed5{top:20px; Www.Svn8.Com
right:90px;
Bbs.Svn8.Com
z-index:9;
Svn8.Com
background-color:#9c9;}
Svn8.Com
#a,#b,#c{width:300px; Bbs.Svn8.Com
height:100px; 参考资料:www.svn8.com
border:1px solid #000; Bbs.Svn8.Com
background-color:#ccc;}
Www.Svn8.Com
</style></head>
Svn8.Com
<body> 参考资料:www.svn8.com
<div id="all">
Www.Svn8.Com
<div id="fixed1">第1个固定的div容器</div> Bbs.Svn8.Com
<div id="fixed2">第2个固定的div容器</div>
Bbs.Svn8.Com
<div id="fixed3">第3个固定的div容器</div> Svn8.Com
<div id="fixed4">第4个固定的div容器</div>
Bbs.Svn8.Com
<div id="fixed5">第5个固定的div容器</div> Bbs.Svn8.Com
<div id="a">第1个无定位的div容器</div> Svn8.Com
<div id="b">第2个无定位的div容器</div>
Www.Svn8.Com
<div id="c">第3个无定位的div容器</div>
Www.Svn8.Com
</div> Svn8.Com
</body> Bbs.Svn8.Com
</html> Www.Svn8.Com
笔者给外部div设置了#eee背景色，并给内部无定位的div设置了#ccc背景色，而绝对定位的div容器设置了#9c9和#9cc背景色，并设置了double类型的边框。在浏览器地址栏输入http://localhost/pos_ab.htm，浏览效果如图11.23所示。 Svn中文网
图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个绝对定位的容器的上方。 参考资料:www.svn8.com
— 说明：读者可以随意拖动浏览器的窗口大小，观察绝对定位的div容器位置变化。
CSS相对定位,固定定位,绝对定位实例方法和实例相关推荐
- CSS中固定定位、相对定位、绝对定位以及flex布局高效定位
CSS中固定定位.相对定位.绝对定位以及flex布局高效定位 一.固定布局 将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...
- html中fixed属性,css fixed固定定位属性
[实例介绍] css fixed固定定位属性 当容器的position属性值为fixed时,这个容器即被固定定位了.固定定位和绝对定位非常 相似,不过被定位的容器不会随着滚动条的拖动而变化位置.在视野 ...
- CSS之固定定位、相对定位、绝对定位
一.相对定位 相对元素自身所在的原来的位置进行定位. 可以设置 left,right,top,bottom四个属性 效果:在进行相对定位以后,元素原来所在的位置被保留了,被占用了–>保留站位其他 ...
- 【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )
文章目录 一.开发要点分析 二.代码示例 一.开发要点分析 实现下图样式 : 中间部分是网页内容 , 左右两侧是 固定广告栏 , 不管浏览器如何滚动 , 缩放 , 该左右两侧广告栏不变 ; 标签结构分 ...
- uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
- 【CSS】固定定位-固定到版心右侧
position:fixed left: left50% margin-left:版心盒子宽度一半
- CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 固定定位 绝 ...
- CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
目录 1.定位布局 1.1.静态定位( Static positioning) 简单代码实现: - 1.2.什么是相对定位?( Relative positioning ) 简单代码实现: - 1 ...
- css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
最新文章
- weui-switch开关控件，表单提交后如何取值
- python通用爬虫和聚焦爬虫的区别
- 值不值得入手_比3系更运动！标配2.0T+后驱，凯迪拉克CT5值不值得入手
- 千元优品vivo U3上架：骁龙675处理器+5000mAh超大电池
- 在Session中存储和获取
- ZZNU-oj-2141:2333--【O(N)求一个数字串能整除3的连续子串的个数，前缀和数组+对3取余组合数找规律】...
- 【Irrlicht Engine笔记】test4-movement
- java 定时器 数据库_java实现定时器，定时修改数据库代码
- STM32电机库（ST-MC-Workbench）学习记录——电流采样参数设置
- 新经济 DTC 转型，一个简单而强大的数据平台至关重要
- idea-svn文件名字浅蓝色（蓝绿色）含义
- [POJ3683]Priest John's Busiest Day
- 2021-09-13 备份
- python牛顿法算立方根_立方根求解（牛顿迭代法）
- IO流的节点流和处理流（缓冲流）and ZIP流使用
- 【OKHTTP3】OKHTTP3使用GET和POST
- 为什么公众号总是显示服务器不正常,“该公众号提供的服务出现故障，请稍后再试”问题的处理办法...
- 实践练习四（必选）：迁移 MySQL 数据到 OceanBase 集群
- IT行业的各岗位职责
- 自动扫福脚本（Android版）