前端基础(4) - CSS定位
CSS定位知识图谱
1.概述及相对定位
1.1.概述
定位position的四个属性:
- relative:相对
- absolute:绝对
- static:无定位,也是默认的设置
- fixed:固定
1.2.相对定位
示例代码-index.html(没做定位处理)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>相对定位演示</title> 5 <link rel="stylesheet" type="text/css" href="index.css"> 6 </head> 7 <body> 8 <div id="main"> 9 <div id="div1"></div> 10 新京报贝壳财经讯(记者 许诺)12月25日,工业和信息化部副部长刘烈宏宣布,工信部将于明年1月起进行为期一年的“互联网应用适老化及无障碍改造专项行动”,着力解决老年人、残疾人等特殊群体在使用互联网等智能技术时遇到的困难,首批将优先推动8大类115家网站、6大类43个APP进行适老化及无障碍改造。 11 </div> 12 </body> 13 </html>
示例代码-index.css(没做定位处理)
1 #main{ 2 height: 600px; 3 width: 600px; 4 background-color: #478967; 5 } 6 #div1{ 7 height: 100px; 8 width: 100px; 9 background-color: red; 10 }
展示效果:没做定位处理
示例代码-index.css:对div1使用相对定位
1 #main{ 2 height: 600px; 3 width: 600px; 4 background-color: #478967; 5 } 6 #div1{ 7 height: 100px; 8 width: 100px; 9 background-color: red; 10 11 position: relative; 12 top: 20px; 13 left: 30px; 14 }
展示效果:红色方框原先的位置保留了下来,没有被文字侵占;红色方框还在标准文档流中;
注意:
- 可以只写position: relative,而不写top和left;即可以只设置定位方式,而不设置偏移;
- 相对定位,一般不用单个元素的定位和显示;而是,将一个父元素设置成相对定位,这个父元素中包含很多子元素,这种场景下常用;
2.绝对定位
示例代码-index.html
示例代码-index.css(没有添加偏移量)
设置绝对定位:position: absolute
展示效果(没有添加偏移量):
- 红色部分设置成绝对定位后,文字填充到了红色方框“以前位置了”
- 可以理解为,红色方框已经脱离了文档流;脱离之后,红色方框就产生了一个浮动的效果;红色方框和文字已经处在不同的层了
- 可以理解为,文字处在底层,红色方框处在上层(浮动层)
示例代码-index.css(添加偏移量)
展示效果(添加偏移量):
- 绝对定位的参照物是最近的父级元素
- 如果没有父级元素,就以<body>为参照物
思考:当父级div设置成相对定位或者绝对定位会发生什么?
1)父级div设置成相对定位和绝对定位时,位置会略微不同
1.1)父div设置成相对定位
1.2)父div设置成绝对定位
和相对定位相比,绝对定位的位置离左上角更近一点
2)父级div设置成相对定位和绝对定位时,脱离标准流与否以及和文字在一起显示时是有区别的
2.1)父级div设置成绝对定位
2.2)父级div设置成相对定位
总结:绝对定位会破坏标准流,相对定位不会破坏标准流
3.相对定位和绝对定位
3.1.在不设定position时候,直接设置偏移量(top,left)是无效的!
3.2.需求案例
预设条件
需求:将这三个div当作一个整体,移动到中间位置
实现:第一种方法
添加一些文字,用于检验我们的方法对其他属性有没有影响;各个div使用相对定位来实现
实现:第二种方法
给这三个div外面再嵌一个div,设置其为相对定位,并设置偏移达到需求效果
4.定位和浮动
4.1.绝对定位和浮动
绝对定位可以使div脱离标准文档流,产生浮动的效果;而以前接触的浮动(float)也可以让div脱离标准文档流,产生浮动的效果;这二者都可以让div脱离文档流,产生浮动效果,那么这二者的区别是?
- 相同点:都会破坏文档流,都会产生浮动;
- 不同点:
- float浮动,文档流的其他内容不会忽略浮动的位置,其他内容会绕开
- 绝对定位实现的浮动效果,文档流的其他内容会忽略浮动的位置,会直接穿过绝对定位所在的div
使用绝对定位达到浮动效果
绝对定位之后破坏了文档流,产生了浮动,但发现,文字忽略(忽视)了div所在的位置,文字进入div浮动的位置,文字被遮挡了
float浮动
float浮动效果,文字没有忽略div所浮动的位置
注意:当绝对定位和浮动同时使用时,浮动float会始取效果。以绝对定位为准
4.2.相对定位和浮动
相对定位和浮动组合使用时,可以使左右上下间距生效,同时文字没有被遮挡住
5.z-index的使用
z-index作用:重叠时,控制哪个div在前面显示,哪个div在后面显示。
z-index一般不应设置过小,也不应该设置过大;一般设置成10,30,50这样的整十数,因为在页面编写的时候往往会有很多div,可能在编写过程中需要新增div,或者删除一个div,设置的div相对大一点,可以留有增删修改的空间和余地。也有的时候当div和父div结合的时候,也可以利用z-index进行分组的感觉,比如201-300之间的是这个父div中的,301-400是另一个父div中的,这些都是开发时的习惯,注意下就行 。
![](https://img2022.cnblogs.com/blog/2281865/202209/2281865-20220920162103742-885066481.png)
注意:如果不设置position,z-index是失效的
6.固定定位
固定定位:相对于浏览器窗口的定位
相对于我们浏览过网站的对联样式;注意:固定定位的div会摆脱父子包含关系
7.定位小结
1)相对定位和绝对定位是不是好兄弟
- 相对定位的参照物是自己,绝对定位的参照物是最近的一级父级元素;
- 相对定位不会破坏文档流,绝对定位会破坏文档流;
- 两者一起搭档使用时,通常相对定位作为父一级单位,绝对定位作为子一级单位;相对定位的父级单位作为绝对定位的子级元素定位的参照物,当这些子级元素想要整体移动的时,就可以以相对定位的父级元素进行整体移动;从这个角度来说,二者称呼为父子可能更贴切些;
2)定位的参照物
- 相对定位的参照物是自己,绝对定位的参照物是最近的一级父级元素;
3)浮动和定位分别在什么情况下使用?
- 相对定位和浮动可以组合使用,相对定位的左右高低可以生效
- 绝对定位和浮动组合使用时,浮动不会生效,只有绝对定位会生效