CSS定位

css有四种定位方式，分别是相对定位，绝对定位，固定定位，粘性定位

相对定位：

1
2
position: relative;
top: 40px; left: 40px;

相对定位是参考位置是自己原来的位置，在css布局中，父元素经常被设定为相对定位，子元素被设定为绝对定位，这被称为“父相子绝”

相对定位特点：

  1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。就算出现覆盖了，也只是视觉上的覆盖，层级还是在这一层级，并没有出现浮动。
  2. 都发生定位的两个元素，后写的元素会盖在先写的元素之上。
  3. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
  4. 相对定位，经常会与绝对定位配合使用。
  5. 不推荐对相对定位的元素进行浮动和用margin调整位置

绝对定位：

1
2
position: absolute;
top: 40px; left: 40px;

绝对定位的参考点是它的包含块

1

绝对定位元素的特点：

  1. 脱离文档流，会对后面的兄弟元素、父元素有影响。这点与相对定位对比

  2. left 不能和 right 一起设置， top 和 bottom 不能一起设置。

  3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以绝对定位为主

  4. 不推荐对绝对定位的元素进行浮动和用 margin 调整位置

  5. 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

    1
    2
    3
    4
    5
    <span class="a"></span>

    .a{
    	position:absolute //span变为块元素
      }

    ​

    什么时候使用绝对定位：

    下面三个条件满足任何一个时,使用绝对定位:

    1.元素出现在一个天马行空的位置

    2.元素是否存在，不影响其他元素的排列

    3.单个元素在某个区域内水平垂直居中

​

fixed和absolute的区别：

fixed是绝对定位的一种特殊情况，它们的参考系不一样

  • absolute参考有定位的父元素
  • fixed参考视口

父相子绝的例子:

首页 新闻 角色 世界 漫画 社区 
1
2
3
4
5
6
7
8
9
10
11
.header-nav{

  display: flex;

  height: 100%;

  align-items: center;

  position: relative;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.header-nav-bar{

  position: absolute;/*子绝父相*/

  width: 40px;

  height: 5px;

  background: #69e0ff;

  left: 30px;

  top: 0

}

固定定位：

类似于浏览器的恶意广告(开局一条狗)就是用这种定位形成的

1
position: fixed

固定定位的参考点是它的视口

固定定位元素的特点与绝对定位很相似：

  1. 脱离文档流，会对后面的兄弟元素、父元素有影响。

  2. left 不能和 right 一起设置， top 和 bottom 不能一起设置。

  3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。

  4. 不推荐对绝对定位的元素进行浮动和用margin调整位置。

  5. 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

粘性定位：

1
position:sticky

粘性定位的参考点在哪里是离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

特点:

  1. 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
  2. 最常用的值是 top 值。效果类似于滚动条向下滚动，到某个位置停下
  3. 不推荐对绝对定位的元素进行浮动和用margin调整位置。

总结:

  1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
  2. 发生相对定位后，元素依然是之前的显示模式。