您现在的位置是：网站首页> 编程资料编程资料
CSS position属性和实例应用演示CSS之定位布局(position，定位布局技巧)css定位position引发的层级关系问题详解详解css粘性定位position：sticky问题采坑CSS的position定位和float浮动详解css关于position属性的用法详解(绝对定位和相对定位的混淆)css position fixed 左右双定位的实现代码
2023-10-21
235人已围观
简介 这篇文章主要介绍了CSS position属性和实例应用演示,absolute（绝对定位）,relative（相对定位）,relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下
目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10还没测试过），以下是w3school对position五个值的解释：
其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）。
1、absolute（绝对定位）
absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。具体案例如下：
position:absolute定位 position:absolute定位测试
这段代码产生的效果如下：
这是设定TRBL之后的效果(设置TRBL以浏览器左上角为原点)，当没有设置TRBL时（没有设置TRBL是以父级对象的坐标为原点），即将div1改成如下代码时
.div1{ width:200px; height:200px; background:#0099FF; /*没有设定TRBL*/ position:absolute; }
则效果如下：
2、relative（相对定位）
relative是相对的意思，顾名思义就是相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。具体案例如下：
position:relative定位 position:relative定位测试
代码产生的效果如下：
3、relative与absolute的结合使用
在网页设计时经常会用到浮动来对页面进行布局，但是浮动所带来的不确定因素却很多（例如：IE浏览器的兼容问题）。相对来说，在有些布局中定位使用会更加简单、快捷、兼容性更好（relative与absolute相结合来使用），下面通过网页中的一个实例（网页中的head部分）进行说明，具体代码如下：
效果如下图：
在上述代码中首先是给head设置relative定位，那么可以看到里面所有的子元素在设置absolute后都会相对head进行定位，而不是相对body定位。这样相对于用浮动来说就简单方便了很多，也不需要担心兼容问题。
以上就是小编为大家整理的全部内容啦，希望对各位能有所帮助，也希望大家继续支持啦~~~
相关内容
- 天天富翁全隐藏人物发现获得方法_手机游戏_游戏攻略_
- flappy bird 闪退黑屏怎么解决_手机游戏_游戏攻略_
- 全民飞机大战2月13日叉叉助手烧饼修改器百万分教程_刷分技巧_手机游戏_游戏攻略_
- 全民飞机大战刷金币技巧_叉叉助手2月13日秒刷金币教程_手机游戏_游戏攻略_
- 全民飞机大战游戏进不去_网络异常解决方法说明_手机游戏_游戏攻略_
- 全民飞机大战战机天马王子升级费用全面解析_手机游戏_游戏攻略_
- 全民飞机大战叉叉助手2月13日辅助教程攻略_刷金币刷分技巧_手机游戏_游戏攻略_
- 全民飞机大战刷分技巧_uu助手安装刷分教程_手机游戏_游戏攻略_
- 全民飞机大战pc版安装使用教程_Start BlueStacks安装方法_手机游戏_游戏攻略_
- 全民飞机大战刷分攻略_全民飞机大战不作弊刷高分的方法_手机游戏_游戏攻略_
