11-定位

定位

定位的目的：确定移动的具体位置。

定位在css中是一个非常重要的概念，主要是针对页面上的元素，进行指定位置排列方式

应用场景：

​ 例如：woniucx.com或者woniuxy.com

怎么设置CSS定位？

• 语法：

  position:static;
  static  静态定位
  relative 相对定位
  absolute  绝对定位
  fixed      固定定位
  1
  2
  3
  4
  5

设置静态定位 static（了解）

• 默认每个元素都是static定位，参考标准文档流

  标准文档流： 在页面布局过程中，元素默认按照从上到下，从左到右，块级元素独占一行，行级元素共享一行的排列规范。

设置相对定位（重点）

• 概念：参考移动之前的位置，按照你指定的方向进行移动

• 语法：

  position:relative;
  1

• 定义偏移量：

  • top：设置元素距离上边框的偏移量
  • left：距离左边的偏移量
  • right：距离右边的偏移量
  • bottom：距离下边的偏移量

• 特点：

  • 设置元素的相对定位后，元素不会脱离文档流，只是破坏文档流
    • 什么是破坏文档流？
      • 元素在页面布局过程中，元素移动时不遵循标准文档流的规范，移动完成后会回到标准文档流里。只是在移动过程中会破坏文档流的规范。
  • 只给元素设置相对定位，对元素本身是不会有影响，除非设置偏移量，元素才会发生移动
  • 元素一旦设置了偏移量，会按照指定的方向进行移动，移动过程中不遵循标准文档流，移动完成后还在标准文档流里面。
  • 移动过程是参考原来的位置进行移动
  • 原来的位置依然保留，不会消失（原来的空间还在）

• 注意：

  • 子元素相对定位后，父元素进行移动，子元素会跟着移动（子元素原来的位置跟着父元素一起移动）
  • 相对定位一般不会单独使用，也不会单独用来布局，通常配合绝对定位来使用

设置相对定位（重点）

• 概念：元素会脱离文档流，按照你设置的方向进行移动

• 语法：

  position:absolute;
  1

• 偏移量

  • top：距离参考位置的上边缘的距离
  • bottom：距离参考位置下边的距离
  • left：距离左边的偏移
  • right：距离右边的偏移

定位父级

​ 为什么设置定位父级？

​ 因为绝对定位默认是参考文档进行移动，无法满足定位需求。

​ 怎么设置定位父级？

​ 子绝父相

​ 只需要找到结构父级或者定位父级设置一个相对定位即可，当然设置固定定位和绝对定位也是可以的。 因为相对定位不会影响其他元素的排列，并且相对定位盒子本身不会脱离文档流

• 结构父级：盒子在html代码结构中的父元素

• 定位父级：作为参考位置的父级称为定位父级。父级可以是结构父级，也可以是结构父级的父级。

    
    
    
      
  
          
          
  
              
  3
          
      
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29

绝对定位特点：

• 会脱离文档流，原来的位置不存在
• 绝对定位前面的标准文档流里面的元素是不会受影响。
• 一旦设置了绝对定位，后面绝对定位的元素会盖住前面绝对定位的元素（后面绝对定位元素的层级更高）
• 绝对定位设置偏移量后，是参考整个文档进行移动
• 行级元素也可以设置绝对定位，一旦设置了默认支持宽高

注意：通常需要配合相对定位使用

定位层级

• 设置元素的层级关系，只针对于定位元素（相对定位，固定定位，绝对定位）有效

• 语法：

  z-index:数字;
  1

  • 注意：默认为0 ，值越大，层级越高，可以设置负值,不能是小数
  • 如果没有设置z-index，按照代码结构，后面的元素盖住前面元素，后面定位的元素层级更高

固定定位 (重点)

• 固定在屏幕上，脱离文档流，按照 指定的方向进行移动

• 语法：

  position:fixed;
  1

• 特点：

  • 脱离文档流，原来的空间不存在
  • 设置偏移量后，是参考整个文档进行移动

• 应用场景：头部导航。广告，提示框等等。

粘性（sticky ）定位（拓展）

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈（yu 界限 门槛）值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

 
 




尝试滚动页面。
注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。

我是粘性定位!


  
滚动我
  
来回滚动我
  
滚动我
  
来回滚动我
  
滚动我
  
来回滚动我




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

定位元素宽度

绝对定位元素的width设置100%是参考盒子的宽度

• 没有定位父级，100%参考文档的宽度
• 有定位父级，100%参考定位父级的宽度

没有设置定位的元素，100%参考结构父级的宽度

扩展知识：

盒子居中技巧

margin:auto auto：可以让元素水平居中，但垂直方向无法居中，auto是一个值，浏览器自动计算剩余空间再均分。

网页在垂直方向上高度变化很大，内容不一样，高度就不一样，所以垂直方向上auto被禁用。

方案一：通过margin自动计算

居中盒子上设置绝对定位，使用四个方向都为0，再配合margin:auto auto;;参考的盒子可以设为定位父级。

居中盒子相对于定位父级进行水平垂直居中，通过margin自动计算再均分

 
   
"box1">
        
"box2">
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

方法二：借助calc函数进行元素

局限性：父盒子必须是正方形，因为margin设置百分比是参考父盒子的宽度。

margin-top: 大盒子的高度的一半，减小小盒子高度的一半

margin-left：大盒子宽度的一半，减去小盒子宽度的一半

注意：借助calc配合marign使盒子居中，需要父盒子的宽度和高度一致，才有效。否则不能使用。并且calc函数还有兼容性问题

/* 借助calc函数自动计算，可以进行加减乘除的运算 */
/* calc函数的符号前后需要空格隔开 */
margin-top: calc(50% - 小盒子高度的一半);
margin-left: calc(50% - 小盒子宽度的一半);
1
2
3
4

• 注意：margin和padding设置百分比时，是参考父盒子的宽度。无论哪个方向都是参考宽度。

方案三：使用绝对定位，配合marign可以实现

绝对定位使用top：50%，left：50%，然后设置margin-top为小盒子高度的一半（负值），margin-left为小盒子宽度的一半（负值）

好处：兼容性比较好

坏处：margin-top和margin-left需要自己计算

  
	
"box1">
        
"box2">
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

练习&作业：

• 大麦网

  

• 京东导航布局

  

margin-left: -150px;

   }
1

```

练习&作业：

• 大麦网

  [外链图片转存中…(img-yG2j76cj-1663563220318)]

[外链图片转存中…(img-WsohOORN-1663563220319)]

• 京东导航布局

  [外链图片转存中…(img-eqql0R7x-1663563220325)]

[外链图片转存中…(img-Mi6yGFfk-1663563220326)]