CSS之定位

目录

• CSS定位
• • 为什么需要定位
  • 定位组成
  • 定位的叠放顺序
  • 拓展

CSS定位

为什么需要定位

1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2. 定位则是可以让盒子自由 的在某个盒子内移动位置 或者固定 屏幕中的某个位置，并且可以压住其他盒子

定位组成

将盒子定在某个位置，也是在拜访盒子
定位 = 定位模式 + 边位移
定位模式 用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

• 定位模式属性position：
  

• 边偏移属性：

1. 静态定位static（了解）:
   按标准流特性定位，无边偏移量 ，用的少
   语法格式：

   选择器 {
   position：static;
   }

2. 相对定位relative（重要） ：
   特点：
   ① 移动位置时，相对于它原来的位置
   ② 原来在标准流的位置继续占有，即不脱标 ，保留原来位置
   语法格式：

   选择器 {
   position：static;
   }

eg：

div {
    position：static;
    //意思为相对于原来的位置向下移动100像素
    top:100px;
}

3. 绝对定位absolute（重要） ：
   在移动时相对于它的祖先来说
   语法格式：

   选择器 {
   position：absolute;
   }

特点：

① 如果没有父元素或祖先元素没有定位，则以浏览器为准定位

② 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级 的有定位的祖先元素为参考点移动位置

③ 绝对定位不再占有原来的位置，即脱标

子绝父相

子级是绝对定位的话，父级要用相对定位

① 子级绝对定位，不会占有位置，可以放到父盒子里面任意一个地方，不影响其他兄弟盒子

② 父盒子要加定位限制子盒子在父盒子内显示

③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位

如果父盒子不需要占有位置时，也会用到子绝父绝

4. 固定定位fixed（重要） ：

元素固定在浏览器可视区 的位置

特点：

① 以浏览器的可视窗口为参照点移动元素，和父元素没关系，不随滚动条滚动

② 脱标 ，不保留原来位置

小技巧：固定在版心右侧位置

① 让固定定位的盒子left：50%，走到浏览器可视区的一半位置

② 让固定定位的盒子margin-left：版心宽度一般的距离，多走版心宽度一半的位置

5. 粘性定位sticky（了解）：

可以被认为是相对定位和固定定位的混合

① 以浏览器的可视窗口为参照点移动元素

② 不脱标 ，保留原来位置

③ 必须添加top、left、right、bottom其中一个才有效

兼容性差，IE不支持

6. 总结
   

定位的叠放顺序

使用z-index控制盒子的前后次序（x轴）

tips：

1. 数值可以是正、负整数或0，默认是auto，数值越大，盒子越靠上

2. 如果数值相同，则后来者居上

3. 数字后不能加单位

4. 只有定位的盒子才有z-index属性
   语法格式：

   选择器 {
   z-index: 1;
   }

拓展

1. 绝对/固定定位的盒子居中：
   加了绝对定位的盒子不能通过margin:0 auto;水平居中
   语法格式

   选择器 {
   position: absolute;
   left: 50%;
   margin-left: -45px;
   width: 90px;
   height: 90px;
   }

2. 定位特殊特性
   ① 行内元素添加绝对或固定定位，可直接设置宽度和高度
   ② 块级元素添加绝对或固定定位，宽度和高度默认是内容的宽度和高度

3. 脱标的盒子不会触发外边距塌陷问题

4. 决定定位、固定定位会完全压住盒子
   浮动只会压住它下面的盒子，不会压住文字，可做文字环绕 ，但定位会压住文字