前端基础(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中的，这些都是开发时的习惯，注意下就行 。

 注意：如果不设置position，z-index是失效的

6.固定定位

固定定位：相对于浏览器窗口的定位

相对于我们浏览过网站的对联样式；注意：固定定位的div会摆脱父子包含关系

7.定位小结

1）相对定位和绝对定位是不是好兄弟

  • 相对定位的参照物是自己，绝对定位的参照物是最近的一级父级元素；
  • 相对定位不会破坏文档流，绝对定位会破坏文档流；
  • 两者一起搭档使用时，通常相对定位作为父一级单位，绝对定位作为子一级单位；相对定位的父级单位作为绝对定位的子级元素定位的参照物，当这些子级元素想要整体移动的时，就可以以相对定位的父级元素进行整体移动；从这个角度来说，二者称呼为父子可能更贴切些；

2）定位的参照物

  • 相对定位的参照物是自己，绝对定位的参照物是最近的一级父级元素；

3）浮动和定位分别在什么情况下使用？

  • 相对定位和浮动可以组合使用，相对定位的左右高低可以生效
  • 绝对定位和浮动组合使用时，浮动不会生效，只有绝对定位会生效

 

 
posted @ 2022-10-11 10:20  葛老头  阅读(33)  评论(0)  编辑  收藏  举报