这次给大家带来CSS的定位属性详解，使用CSS定位属性的注意事项有哪些，下面就是实战案例，一起来看一下。
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。
position: absolute; position: relative; position: fixed;
下面逐一介绍。
相对定位
相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
我们之前学习的背景属性中，是通过如下格式：background-position:向右偏移量 向下偏移量;
但这回的定位属性，是通过如下格式：
position: relative; left: 50px; top: 50px;
相对定位的举例：
Document body{ margin: 0px; } .p1{ width: 200px; height: 200px; border: 1px solid red; } .p2{ position: relative;/*相对定位：相对于自己原来的位置*/ left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/ top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/ width: 200px; height: 200px; border: 1px solid red; }有生之年
狭路相逢
效果：
相对定位不脱标
相对定位：不脱标，老家留坑， 别人不会把它的位置挤走 。
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
相对定位的用途
相对定位有坑，所以如果需要做一般不用于做“压盖”效果（把一个p放到另一个p之上）。页面中，效果极小。就两个作用：
（1）微调元素
（2）做绝对定位的参考，子绝父相
相对定位的定位值
left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移
PS：负数表示相反的方向。
↘：
position: relative; left: 40px; top: 10px;
↙：
position: relative; right: 100px; top: 100px;
↖：
position: relative; right: 100px; bottom: 100px;
↗：
position: relative; left: 200px; bottom: 200px;
如果要描述上面这张图的方向，我们可以首先可以这样描述：
position: relative; left: 200px; top: 100px;
因为 left: 200px 等价于 right: -200px ，所以这张图其实有四种写法。
绝对定位
绝对定位：定义横纵坐标，原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
格式举例如下：
position: absolute; /*绝对定位*/ left: 10px; /*横坐标*/ top/bottom: 20px; /*纵坐标*/
绝对定位脱标
绝对定位的盒子脱离了标准文档流。
所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要 display:block 就可以设置宽、高了。
绝对定位的参考点（重要）
（1）如果用 top描述 ，那么参考点就是 页面的左上角 ，而不是浏览器的左上角：
（2）如果用 bottom描述 ，那么参考点就是 浏览器首屏窗口尺寸 （好好理解“首屏”二字），对应的页面的左下角：
为了理解“ 首屏 ”二字的含义，我们来看一下动态图：
问题：
答案：
用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
以盒子为参考点
一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
如下：（子绝父相）
以下几点需要注意。
（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
相对定位
没有定位
绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
再比如：
相对定位
相对定位
绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
子绝父绝、 子绝父相 、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
工程应用：
“ 子绝父相 ”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
（3）绝对定位的儿子，无视参考的那个盒子的padding：
下图中，绿色部分是父亲p的padding，蓝色部分p是p的内容区域。此时，如果p相对定位，p绝对定位，那么，
p将无视父亲的padding，在border内侧为参考点，进行定位：
工程应用：
绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。
现在有如下两张图片素材：
要求作出如下效果：
代码实现如下：
Document .box{ margin: 100px; width: 308px; height: 307px; border: 1px solid #FF7E00; position: relative; /*子绝父相*/ } .box .image img{ width: 308px; height: 196px; } .box .dtc{ display: block; /*转为块级元素，才能设置span的宽高*/ width: 52px; height: 28px; background-image: url(http://img.smyhvae.com/20180116_1115.png); background-position: -108px 0px; /*这里用到了精灵图*/ position: absolute; /*采用绝对定位的方式，将精灵图盖在最上层*/ top: -9px; left: 13px; } .box h4{ background-color: black; color: white; width:308px; height: 40px; line-height: 40px; position: absolute; top: 156px; }
@@##@@
广东深圳宝安区建安一路海雅缤纷城4楼
代码解释如下：
为了显示“多套餐”那个小图，我们需要用到精灵图。
“多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。
代码的效果如下：
让绝对定位中的盒子居中
我们知道，如果想让一个 标准流中的盒子居中 （水平方向看），可以将其设置 margin: 0 auto 属性。
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中，可以这样做：
width: 600px; height: 60px; position: absolute; 绝对定位的盒子 left: 50%; 首先，让左边线居中 top: 0; margin-left: -300px; 然后，向左移动宽度（600px）的一半
如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。
我们可以总结成一个公式：
left:50%; margin-left:负的宽度的一半
固定定位
固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。
备注：IE6不兼容。
用途1：网页右下角的“返回到顶部”
比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。
.backtop{ position: fixed; bottom: 100px; right: 30px; width: 60px; height: 60px; background-color: gray; text-align: center; line-height:30px; color:white; text-decoration: none; /*去掉超链接的下划线*/ }
用途2：顶部导航条
我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。
需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。
顶部导航条的实现如下：
Document *{ margin: 0; padding: 0; }body{ /*为什么要写这个？*/ /*不希望我们的页面被nav挡住*/ padding-top: 60px; /*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/ _padding-top:0; } .nav{ position: fixed; top: 0; left: 0; width: 100%; height: 60px; background-color: #333; z-index: 99999999; } .inner_c{ width: 1000px; height: 60px; margin: 0 auto; } .inner_c ul{ list-style: none; } .inner_c ul li{ float: left; width: 100px; height: 60px; text-align: center; line-height: 60px; } .inner_c ul li a{ display: block; width: 100px; height: 60px; color:white; text-decoration: none; } .inner_c ul li a:hover{ background-color: gold; } p{ font-size: 30px; } .btn{ display: block; width: 120px; height: 30px; background-color: orange; position: relative; top: 2px; left: 1px; }
5、z-index属性：
z-index属性：表示谁压着谁。数值大的压盖住数值小的。
有如下特性：
（1）属性值大的位于上层，属性值小的位于下层。
（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。 而浮动的元素不能用 。
（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
针对（1）（2）（3）条，举例如下：
这是默认情况下的例子：（p2在上层，p1在下层）
现在加一个 z-index 属性，要求效果如下：
第五条分析：
z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
毛毛虫爬行动画怎样实现
立即学习“前端免费学习笔记（深入）”；
怎么用CSS设置记录用户密码
Canvas制作旋转太极的动画
以上就是CSS的定位属性详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609108.html
微信扫一扫 
支付宝扫一扫 
