css_定位

1.作用：

• 浮动作用：可以让多个块级元素在一行水平分布并且没有缝隙；
• 定位作用：定位可以让元素在某个盒子内部自由移动并且可以盖住其他盒子(层级：定位>浮动>标准)；

2.定位组成

定位 = 定位模式+边偏移；

定位模式(position)

• 静态定位

  • position:static;
    

• 相对定位

  • position:relative;
    

• 绝对定位

  • position:absolute;
    

• 固定定位

  • position:fixed;
    

• 粘性定位(css3新增定位)

  • position:sticky; // /ˈstɪki/
    

边偏移

• 方向
  • top
  • bottom
  • left
  • right
• 单位
  • px
  • 百分比
    • 固定定位：相对于浏览器可视区域大小来说
    • 绝对定位：相对于父元素大小来说

3.定位详解

[1]静态定位

• 语法

  • position:static;
    

• 特点

  • 静态定位是 默认的 定位方式；
  • 静态定位 没有边偏移，设置静态定位相当于没有定位-元素按照默认文档流进行排列；

[2]相对定位

• 语法

  • position:relative;
    

• 特点

  • 相对定位的边偏移是相对于元素 原本的位置 来说的；

  • 相对定位 没有脱标

    • 元素设置相对定位

      • 没有设置边偏移
        • 元素不会发生任何变化(与没有设置相对定位相同)；
      • 设置边偏移
        • 现在位置：元素根据偏移量移动
        • 原来位置：元素在标准流原来的位置继续占有，后面的盒子仍然以标准流的方式对待；

    • 举例说明

      • <div>
            <p>普通p标签1</p>
            <div class="relativeClass">
              111
            </div>
            <p>普通p标签2</p>
            <p>普通p标签3</p>
            <p>普通p标签4</p>
            <p>普通p标签5</p>
            <p>普通p标签6</p>
          </div>
        

      • 没有设置边偏移

        • .relativeClass{
              position: relative;
              width: 50px;
              height: 50px;
              background:red;
          }
          

        • 

      • 设置边偏移

        • .relativeClass{
              position: relative;
              top:120px;
              width: 50px;
              height: 50px;
              background:red;
          }
          

        • 

[3]绝对定位

• 语法

  • position:absolute;
    

• 特点

  • 绝对定位的边偏移是相对于它祖先元素来说的

    • 移动相对于 的 距离自己最近 的 具有定位(相对、固定、绝对) 的祖先元素(若是所有祖先都没有定位，则以浏览器为标准)

    • 设置绝对定位

      • <div class="relativeClass">
            <div class="absoluteClass"></div>
        </div>
        

      • 设置偏移量—>会忽略父元素的padding；

        • .relativeClass{
              position: relative;
              background:red;
              width: 50px;
              height: 30px;
              padding-left:20px;
              padding-top:10px;
          }
          .absoluteClass{
              position: absolute;
              background:green;
              width: 20px;
              top:0;
              left:0;
              height: 20px;
          }
          

        • 

      • 不设置偏移量—>默认的left，top是padding的值；

        • .relativeClass{
              position: relative;
              background:red;
              width: 50px;
              height: 30px;
              padding-left:20px;
              padding-top:10px;
          }
          .absoluteClass{
              position: absolute;
              background:green;
              width: 20px;
              height: 20px;
          }
          

        • 

    • 绝对定位完全脱标;

      • 不再占有原先的位置 ，后面的盒子会占据这个位置;
      • 改变元素的性质-使元素变为行内块元素；
      • 撑不开父盒子！

[4]固定定位

• 语法

  • position:fixed
    

• 特点

  • 固定定位是元素固定于浏览器可视区的位置 ，可以在浏览器页面滚动时元素的位置不会改变 ；
  • 固定定位以浏览器的可视窗口为参照点移动元素
    • 跟父元素没有任何关系
    • 不随滚动条滚动
  • 固定定位不在占有原先的位置
  • 兼容性：IE 6 等低版本浏览器不支持固定定位。

[5]粘性定位

• 语法

  • position:sticky;
    

• 特点

  • sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合;
    • 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位
  • 设置粘性定位要想起作用
    • [1]祖先元素不能设置overflow:hidden;或overflow:auto;
    • [2]必须设置偏移量；
    • [3]父元素高度必须大于等于sticky元素的高度;

4.定位应用

• [1]固定定位—固定在版心右侧
  • 1)position:fixed;
  • 2)left:50%;移动到中间位置
  • 3)margin-left:版心宽度的一半；移动到版心右侧且贴着版心；
• [2]绝对定位—实现盒子绝对居中
  • 1)position:absolute;
  • 2)left:50%;
  • 3)tranform:translate(-50%)

5.堆叠顺序

1.场景：在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

2.语法

选择器{

​ z-index:1;

}

• 属性：z-index
• 属性值：默认值0
  • 数值越大，越靠前；
  • 数值相同，则按照书写顺序后来者居上；
• 特点：只能用于定位(relative、absolute、fixed)