CSS笔记 - 定位

定位

目录

• 定位
  • 1. 定位简介
  • 2. 相对定位
  • 3. 绝对定位
  • 4. 固定定位

1. 定位简介

• 定位是一种更加高级的布局手段，通过position属性可以将元素摆放到页面的任意位置

  语法：

  • static：默认值，元素是静止的，没有开启定位
  • relative：开启元素的相对定位
  • absolute：开启元素的绝对定位
  • fixed：开启元素的固定定位
  • sticky：开启元素的粘滞定位

• 当元素开启了定位后，可以通过top/bottom/left/right来设置偏移量，从而调整元素位置

2. 相对定位

• 开启相对定位后元素的特点：

  • 如果不设置偏移量，元素不会发生任何变化
  • 相对位置是参照元素在文档流中的位置进行定位的
  • 相对定位会提升元素的层级
  • 相对定位不会改变的性质（块元素/行内元素）

  .box1{
      height: 100px;
      width: 100ox;
      
      /*开启相对定位*/
      position: relative;
      
      /*向左上(实际是左下)偏移*/
      left:100px;
      top:-200px;
  }
  

3. 绝对定位

• 开启绝对定位后元素的特点：
  • 开启绝对定位后，如果不设置偏移量元素的位置不会发生任何变化
  • 开启绝对定位后，元素会从文档流中脱离
  • 绝对定位会提升元素的层级
  • 绝对定位会改变元素的性质，行内元素变成块元素，块元素的宽高将会被内容撑开
  • 绝对定位元素是相对于其包含块进行定位的
    • 绝对定位中的包含块，就是离它最近的，开启了定位的祖先元素
• 绝对定位的语法和相对定位类似，唯一不同的就是定位的起始点变化了

4. 固定定位

• 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。唯一不同的是固定定位永远参照于游览器的视口进行定位，即固定定位的元素不会随网页的滚动而滚动

• 实际开发中很少用到固定定位，稍作了解即可