CSS——相对定位绝对定位固定定位
来源:互联网 发布:小白基地源码 编辑:程序博客网 时间:2024/05/29 07:38
相对定位:
position: relative;
绝对定位:
position: absolute;
固定定位:
position: fixed;
相对定位
就是微调元素位置的。元素相对自己原来的位置,进行位置调整。
box2的相对定位:
<style type="text/css"> div{ width: 200px; height: 200px; } .box1{ background-color: yellowgreen; } .box2{ background-color: skyblue; position: relative; left: 100px; top: 150px; } .box3{ background-color: lightpink; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></body>
如果一个盒子想进行位置调整,那么就要使用相对定位:
position: relative; 必须先声明自己要相对定位了
特点:不脱标
相对定位不脱标,真实位置在老家,只不过影子出去了,可以到处飘。
在CSS中:
.box2{ background-color: skyblue; position: relative; left: 400px; top: 150px; margin-bottom: 80px; }
本质上说此时的蓝色盒子依然位于原来的位置。相对位置相当于浏览器渲染出来的一个图形。
用途
一般不用于做“压盖”效果,就两个作用:
(1)微调元素
(2)绝对定位的参考
<style type="text/css"> .txt{ font-size: 30px; } .btn{ position: relative; top: 4px; left: 0; } </style></head><body> <p> <input type="text" class="txt"/> <input type="button" value="我是一个按钮" /> </p></body>
相对定位可以调整这个按钮的位置
相对定位的位置
可以用left、right来描述盒子的左右移动;
可以用top、bottom来描述盒子的上下移动;
向右下移动:
position: relative;top: 10px;left: 40px
向左下移动:
position: relative;right: 100px;top: 100px;
向左上移动:
position: relative;right: 100px;bottom: 100px;
负数就是相反的方向,所以向右上移动:
position: relative;top: -200px;right: -200px;
向右上移动:
position: relative;right: -300px;bottom: 300px;
绝对定位比相对定位更灵活
脱标
绝对定位的盒子是脱离标准文档流的,所以所有的标准文档流的性质,绝对定位之后都不遵守了。绝对定位后,标签就不区分行内元素,块级元素了,不需要display: block;就可以设置宽高了。
span{ position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: lightpink; }
参考点
绝对定位的参考点如果用top描述,就是页面的左上角,而不是浏览器的左上角。
如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角。
以盒子为参考点
一个绝对定位的元素,如果父辈元素中出现了也定位了的元素,那么将以父辈这个元素为参考点:
<style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 400px; height: 400px; border: 10px solid red; margin: 100px; } p{ width: 100px; height: 100px; background-color: orange; position: absolute; top: 40px; left: 40px; } </style></head><body> <div> <p></p> </div></body>
此时p的位置将以页面的左上角为40px。
但是一旦给父辈加了相对定位,即:
div{ width: 400px; height: 400px; border: 10px solid red; margin: 100px; position: relative; }
此时将以父辈为参考,位置为父辈盒子中的向下40px,向右40px。
听最近的已经定位的祖先元素的:
<div class="box1"> 相对定位 <div class="box2"> 没有定位 <p></p> 绝对定位,则将以box1为参考,因为box2没有定位,box1就是最近的父辈元素 </div></div>
<div class="box1"> 相对定位 <div class="box2"> 相对定位 <p></p> 绝对定位,则将以box2为参考,因为box2是最近的父辈元素 </div></div>
不一定是相对定位,任何定位都可以作为参考点
<div> 绝对定位 <p></p> 绝对定位,则将以div作为参考点,因为父亲定位了。</div>
子绝父绝、子绝父相、子绝父固,都是可以给儿子定位的。但是,工程上子绝、父绝,没有一个盒子在标准流里面了,所以页面就不稳固,没有任何实战用途。工程上,“子绝父相”有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动。
<div class="box1"> 绝对定位 <div class="box2"> 相对定位 <div class="box3"> 没有定位 <p></p> 绝对定位 将以box2为参考单位 </div> </div></div>
绝对定位的盒子居中
绝对定位之后所有标准流的规则都不适用了,所以margin: 0 auto; 失效。
div{ height: 200px; background-color: blue; }
块级元素不写宽则自动撑满,
但是如果绝对定位了:
div{ position: absolute; height: 200px; background-color: blue; }
则宽度失效了。
所以宽度可以写称width: 100%;
标准文档流中此盒子可以居中:
div{ width: 600px; height: 60px; background-color: blue; margin: 0 auto; }
但是如果position: absolute; 则不能通过标准文档流居中。
则通过以下设置可以居中:
div{ width: 600px; height: 60px; position: absolute; left: 50%; top: 0; margin-left: -300px; }
固定定位
就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变。
.backtop{ position: fixed; width: 100px; height: 100px; background-color: gray; bottom: 100px; right: 30px; text-align: center; line-height: 30px; color: white; text-decoration: none; } </style></head><body> <a href="" class="backtop">返回顶部</a> <img src="images/wuyuetian.jpg" alt="" /> <img src="images/wuyuetian.jpg" alt="" /> <img src="images/wuyuetian.jpg" alt="" /> <img src="images/wuyuetian.jpg" alt="" /></body>
返回顶部就是固定定位。
<style type="text/css"> *{ margin: 0; padding: 0; } .nav{ position: fixed; top: 0; left: 0; width: 100%; height: 60px; background-color: #333; } </style></head><body> <div class="nav"></div> <img src="images/wuyuetian.jpg" alt="" /> <img src="images/wuyuetian.jpg" alt="" /> <img src="images/wuyuetian.jpg" alt="" /> <img src="images/wuyuetian.jpg" alt="" /></body>
固定定位脱标。
IE6不兼容固定定位。
Z-index值
z-index值表示谁压着谁,数值大的压盖住数值小的。
只有定位了的元素,才能有z-index值。不管相对定位、绝对定位、固定定位都可以使用z-index值,浮动的东西不能使用。
z-index值没有单位,就是一个正整数,默认的z-index值是0。
如果大家都没有z-index值,或者z-index值都一样,那么谁写在html后面,谁在网页上能压盖住别人。定位了的元素永远能够压住没有定位的元素。
从父现象。
z-index没有单位。
z-index: 988;
<style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 200px; height: 200px; background-color: yellowgreen; } .box2{ width: 200px; height: 200px; background-color: skyblue; } </style></head><body> <div class="box1"></div> <div class="box2"></div></body>
<style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 200px; height: 200px; background-color: yellowgreen; position: absolute; top: 100px; left: 100px; z-index: 999; } .box2{ width: 200px; height: 200px; background-color: skyblue; position: absolute; top: 180px; left: 180px; z-index:555; } </style></head><body> <div class="box1"></div> <div class="box2"></div></body>
- CSS——相对定位绝对定位固定定位
- css 固定定位 相对定位 绝对定位
- css相对定位、绝对定位、固定定位
- css :相对定位,绝对定位,固定定位
- CSS的定位(绝对定位 相对定位 固定定位)
- CSS的定位(绝对定位 相对定位 固定定位
- css定位(相对定位、绝对定位、固定定位)
- CSS之定位,相对定位,绝对定位,固定定位
- 详解CSS相对定位,绝对定位与固定定位
- css盒子绝对定位,相对定位,固定定位
- 08-CSS 相对定位 绝对定位 固定定位 z-index
- 07 CSS-相对定位、绝对定位、固定定位、z-index
- 2.8 CSS相对定位&&绝对定位&&固定定位&&z-index
- 07 CSS-相对定位、绝对定位、固定定位、z-index
- 相对定位,绝对定位,固定定位
- css相对、绝对和固定定位
- CSS相对定位绝对定位
- css绝对定位&相对定位
- Git 操作之rebase、squash
- PAT (Basic Level) Practise (中文)1051. 复数乘法 (15)
- “大小写转换” 空格问题
- tfs操作命令
- 不兼容结构的协调——适配器模式(二)
- CSS——相对定位绝对定位固定定位
- matlab基本语法
- 比特币黄金Bitcoingold11月12日主网络启动,算法由sha256变更为Equihash
- dubbo服务注册
- 代理模式-动态代理
- dos命令复制文件
- 2.10.4Groovy使用@Lazy
- 【笔记】归并排序
- 搬瓦工搭建ss教程