CSS Position(定位)详解

CSS Position(定位)详解

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位，粘性定位这五种，定位有不同的参数，例如：left、right、top、bottom、z-index等。

一、position 属性指定了元素的定位类型。position 属性的五个值：

• static（静态定位）
• relative（相对定位）
• absolute（绝对定位）
• fixed（固定定位）
• sticky（粘性定位）

1、static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">
该元素使用了 position: static;
</div>

2、relative 定位

相对定位元素的定位是相对其正常位置。。它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

<style>
h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right    
{
    position:relative;
    left:20px;
}
</style>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

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

3、absolute 定位

absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

<style>
    h2
    {
        position:absolute;
        left:100px;
        top:150px;
    }
</style>
<h2>这是一个绝对定位了的标题</h2>

absolute 定位使元素的位置与文档流无关，因此不占据空间。

<style>
    .one{
        width: 20rem;
        height: 20rem;
        left: 50%;
        position: relative;
        background: skyblue;
    }
    .two{
        width: 10rem;
        height: 10rem;
        position: absolute;
        top:30px;
        left: 30px;
        background: violet;
    }
</style>
<div class="one">
    <div class="two"></div>
</div>

上面代码中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移30px，相右偏移30px。

4、fixed 定位

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

<style>
    h2{
        position: fixed;
        top: 2rem;
        right: 2rem;
    }
</style>
<h2>固定定位演示</h2>

5、sticky定位

sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
因此，它能够形成”动态固定”的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。
页面向下滚动时，导航栏变成固定位置，始终停留在页面头部（fixed定位）。
等到页面重新向上滚动回到原位，导航栏也会回到默认位置。

<style>
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">
    <a href="#">首页</a>
</div>
<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生”动态固定”的效果。原因是这四个属性用来定义”偏移距离”，浏览器把它当作sticky的生效门槛。
它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。
请看下面的示例代码。（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。）

6、z-index（重叠的元素）

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

<style>
    div{
        width: 10rem;
        height: 10rem;
    }    
    .one{
        position: relative;
        background: skyblue;
    }
    .two{
        position: absolute;
        top:30px;
        left: 30px;
        background: violet;
        z-index: -1;
    }
</style>
<div class="one"></div>
<div class="two"></div>

*注意：
如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
因为two元素设置了 z-index 属性值为 -1, 所以它会显示在one之后。
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。