定位和隐藏元素

1 定位属性（position）

1.1 定义

position 属性指定了元素的定位类型。 取值：

• static 静态定位【默认值】
• relative 相对定位
• absolute 绝对定位
• fixed 固定定位
• sticky 粘性定位

1.1.1 static 定位

HTML 元素的默认值，即没有定位，遵循正常的⽂档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。

.static {
    position:static;
    background-color:red;
}

1.1.2 relative 定位

相对定位元素的定位是相对自身的正常位置。 移动相对定位元素，但它原本所占的空间不会改变。 相对定位元素经常被⽤来作为绝对定位元素的容器块。

.relative {
    position:relative;
}

1.1.3 absolute 定位

绝对定位的元素的位置相对于最近的已定位⽗元素，如果元素没有已定位的⽗元素，那么它的位置相对于文档定位。 absolute 定位使元素的位置与⽂档流⽆关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

.absolute {
    position:absolute;
    left:20px;
    top:20px;
}

1.1.4 fixed 定位

元素的位置相对于浏览器窗⼝是固定位置。 即使窗⼝是滚动的它也不会移动。

.fixed {
    position:fixed;
    left:20px;
    top:20px;
}

1.1.5 sticky 定位

• 基于⽤户的滚动位置来定位
• 在未滚动出目标区域时，类似 position:relative;
• 当⻚⾯滚动超出⽬标区域时，类似 position:fixed;，它会固定在⽬标位置。
• 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位

这个特定阈值指的是 top, right, bottom 或 left 之⼀，换⾔之，指定 top, right, bottom 或 left 四个阈值其中之⼀，才可使粘性定位⽣效。否则其⾏为与相对定位相同。 注意: Internet Explorer, Edge 15 及更早 IE 版本不⽀持 sticky 定位。 Safari 需要使⽤ -webkit- prefix。

.sticky{
    position:-webkit-sticky;
    position:sticky;
    top:0;
    background-color:red;
    border:2px solid orange;
}

1.2 堆叠的元素

• 元素的定位与⽂档流⽆关，所以它们可以覆盖⻚⾯上的其它元素
• z-index属性指定了⼀个元素的堆叠顺序（哪个元素应该放在前⾯，或后⾯）
• ⼀个元素可以有正数或负数的堆叠顺序

具有更⾼堆叠顺序的元素总是在较低的堆叠顺序元素的前⾯。 注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前⾯。

.zindex {
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
}

1.3 position 难点分析

1.3.1 绝对定位vs相对定位

• 绝对定位就像把不同元素安排到了⼀栋楼的不同楼层，文本流在首层，互不影响
• 相对定位在首层，与文本流在同一层，互相影响
• 绝对定位元素不占据空间，设置绝对定位后，元素浮起来，在文档流中位置被删除，可以被其他元素占据
• 相对定位也让元素浮起来，但是它本身位置不会被删除，也不会被占据
• 通过z-index来设置堆叠的顺序

1.3.2 层级问题

总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。 定位高于浮动，浮动高于标准流。（高低和占不占位置无关） 给定 z-index 的值为层级的值。（不给默认为0）

• 层级为 0 的盒子，也比标准流和浮动高
• 层级为负数的盒子，比标准流和浮动低
• 层级不取小数
• 层级一样，后面的盒子比前面的层级高
• 浮动或者标准流的盒子，后面的盒子比前面的层级高
• abselute是不占位置的，relative是站位的。而层级的高低，是和占不占位置没有关系的。

2隐藏方式

1. 使用透明度

语法：opacity:0 注意：元素消失，但是还会占据空间

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    opacity: 0;
  }
</style>
<div class="box"></div>

2.使用display

语法：display:none 注意：元素消失，不会占据空间

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    display:none;
  }
</style>
<div class="box"></div>

3.使用 scale 缩放

语法：transform:scale(0) 注意：元素消失，但是还会占据空间

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    transform:scale(0)
  }
</style>
<div class="box"></div>

4.使用visibility

语法：visibility:hidden 隐藏 / visible显示 注意： 元素消失，但是还会占据空间

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    visibility:hidden;
  }
</style>
<div class="box"></div>

5.使用宽高和overflow

语法：width:0;overflow:hidden; 注意： 元素消失，但是还会占据空间

<style>
  .box{
    width: 0px;
    height: 0px;
    background-color: aquamarine;
    overflow:hidden;
    visibility:hidden;
  }
</style>
<div class="box"></div>

6.使用position定位

语法：position:absolute; top:-当前元素的高度；left：-当前元素的高度 注意： 元素消失，不会占据空间

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    position:absolute;
    top:-100px;
    left:-100px;
  }
</style>
<div class="box"></div>