css定位-CSDN博客

css定位，即position
position属性有五个值，分别为：
static
relative
absolute
fixed
sticky

一.static（HTML 元素的默认值）
为默认值，也就是没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

二.relative（相对定位）
相对定位是相对于其正常位置

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

h2.right
{
	position:relative;
	left:20px;
}

结果为：

    这是正常的内容
 这个标题相对于其正常位置向左移动
        这个标题相对于其正常位置向右移动

三.fixed(相对于浏览器窗口是固定位置)
即使窗口是滚动的它也不会移动

四.absolute(绝对定位）
相对于其最近的已经定位的父元素，若没有，则相对于<html>
用绝对定位,一个元素可以放在页面上的任何位置。

五.sticky（粘性定位）
基于用户的滚动位置来定位。在 position:relative 与 position:fixed 定位之间切换。
当页面滚动未超出目标区域时，它的行为是position:relative；而当页面滚动超出目标区域时，它的行为是position:fixed 。

最后元素的定位与文档流无关，所以他们可以覆盖页面上的其他元素，形成堆叠，而z-index属性可以用来定义堆叠的顺序，具有更高堆叠顺序的元素在更低堆叠元素的前面

<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
    img
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}

在这里插入图片描述
转载来源：https://www.runoob.com/css/css-positioning.html