声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：[菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)](

定位 Position

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

position 属性的五个值：

• static
• relative
• fixed
• absolute
• sticky

元素可以使用顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

1、static定位

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

    
    

    




position: static;

使用static定位的元素，无特殊定位，遵循正常的文档流对象:


  该元素使用了static定位;

2、relative定位

相对定位元素的定位是相对其默认原始位置。

2.1 基础练习

    
    
    



这行文字位于默认的原始位置
这行文字相对于其原始位置左移
这行文字相对于其原始位置右移
相对定位会按照元素的原始位置对该元素进行移动。
样式 "left:-20px" 从元素的原始位置左侧 减去 20 像素。
样式 "left:20px" 从元素的原始位置左侧 增加 20 像素。

需要注意的是

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

2.2 方块定位练习

实现下图效果

.css代码

    
    

    





    链接1
    链接2
    链接3
    链接4
    链接5

生成页面效果

3、fixed定位

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

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

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

Fixed定位的元素和其他元素重叠。

.css代码

    
    

    




固定位置文字
注意:Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。


Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text

生成页面效果

4、absolute定位

绝对定位的元素的位置相对于最近的已定位父元素；如果元素没有已定位的父元素，那么它的位置相对于:

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

absolute 定位的元素和其他元素重叠。

.css代码

    
    
    



这行文字采用了绝对定位
用绝对定位,一个元素可以放在页面上的任何位置。

生成页面效果

5、sticky定位

sticky 英文字面意思是粘，粘贴，所以可以称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

.css代码

    
    
    



向下滚动页面有好康的
注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。

sticky定位文字: 请继续向下滑动 


    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
    
压力马斯内~

生成页面效果

6、重叠元素

总的来说，谁的堆叠顺序高，谁就在上边，堆叠顺序低的元素被覆盖

类似于ps里边的图层

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

还可以通过opacity更改图片的透明度

    
    
    



测试文字

因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。
即图片放在文字下边，类似于背景图效果