概要：
首先，需要知道定位有几种方式，搞清楚不同的方式所具备的效果，这样才能定好，定清楚位置，而不是出现一个组件动，全图都在动的糟糕情况。
目录
一、CSS定位的几个方式
1.static定位 （静态定位）
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
2.fixed定位 （固定在页面的定位）
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
（ 固定在页面的一个位置，可以想到那恶心人的网站，全是这种窗口式的广告！！！）
【注意】
（1）Fixed 定位在 IE7 和 IE8 下需描述 !DOCTYPE 才支持。
（2）Fixed 定位使元素的位置与文档流无关，因此不占据空间。
（3）Fixed 定位的元素和其它元素重叠。
3.relative 定位 （相对自身定位）
相对定位元素的定位是相对其自身正常位置。
举个例如下图：
4.absolute 定位 （相对父元素定位）
绝对定位的元素的位置相对于最近的已定位父元素，
如果元素没有已定位的父元素，那么它的位置相对于<html>:
用绝对定位,一个元素可以放在页面上的任何位置。
【注意】
（1）absolute 定位使元素的位置与文档流无关，因此不占据空间。
（2）absolute 定位的元素和其他元素重叠
5.sticky 定位 （粘性定位）
粘性定位 的元素是依赖于用户的滚动操作，使其在 position:relative 与 position:fixed 定位之间切换。元素定位表现为，在跨越特定阈值前为相对定位，之后为固定定位。
它没有超出目标区域时的行为就像 position:relative; 但是当页面滚动超出目标区域后，它就变成 position:fixed ； 的模式，让元素固定在页面上。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与 相对定位 相同。
来看一下实际效果如何：点击查看实际运行出的效果
二、重叠的元素，怎么调整它显示的图层？
1.需要用到属性：z-index
2.这个属性使用方法 z-index：1，在其后面添加数字即可，数字越高，显示越上层（即如果是一堆相同属性指定的数当中最大的，那么它就在最上层，完整展示，其他的元素会被覆盖掉。）
3.它的适用范围：
z-index 属性只能在设置了 position: relative / absolute / fixed 的元素 和 父元素设置了 display: flex 属性的 子元素 中起作用，在其他元素中是不作用的。
扫一扫
895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
