CSS：position属性和z_index

最新推荐文章于 2024-10-28 10:21:52 发布

KaiSarH

最新推荐文章于 2024-10-28 10:21:52 发布

阅读量477

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/KaiSarH/article/details/103168851

CSS 专栏收录该内容

28 篇文章

订阅专栏

position属性算是一个很常用的属性了,但是一直搞得不是很明白.
今天抽空彻底研究了一下,做一下记录.

首先,position可能的值有以下几种:

值	描述
static	默认值. 没有特殊的定位,元素出现在正常的流中.(忽略 top, bottom, left, right 或者 z-index 声明)
absolute	生成绝对定位元素,相对于static定位以外的第一个父元素进行定位. 元素的位置通过"left",“top”,“right”,"bottom"进行规定
fixed	生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过"left",“top”,“right”,"bottom"进行规定
ralative	生成相对定位的元素,相对于其正常位置进行定位. 例如:“left:20” 会向元素的 LEFT 位置添加 20 像素。
inherit	规定应该从父元素继承position属性的值

让我们来分别演练一下:

static
①添加static效果

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1.test_1
        {
            position:static;
        }
        h1.test_2
        {
            position:static;
        }
    </style>
</head>
<body>
<h1>123</h1>
<h1 class="test_1">456</h1>
<h1 class="test_2">789</h1>
</body>
</html>

执行结果:
在这里插入图片描述
②不添加static效果

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>123</h1>
<h1 class="test_1">456</h1>
<h1 class="test_2">789</h1>
</body>
</html>

执行效果:
在这里插入图片描述
由此我们可以看出:

static作为默认值,是否添加对样式是没有影响的.

absolute

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1.test
        {
            position:absolute;
            left:100px;
            top:150px
        }
    </style>
</head>
<body>
<h1 class="test">绝对定位</h1>
</body>

</html>

运行结果:
在这里插入图片描述

大家可以看出,虽然我不断将屏幕放大,但是标题的位置始终没有改变.始终都是距离左边100px,上边150px.

而如果我将固定的像素值改为百分比,虽然感官有变化,但仍是绝对定位.

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1.test
        {
            position:absolute;
            left:20%;
            top:20%
        }
    </style>
</head>
<body>
<h1 class="test">绝对定位</h1>
</body>
</html>

运行结果:
在这里插入图片描述

虽然感官上有所变化,但左边和上边都是距离20%,仍然是绝对定位.

fixed
fixed的效果也是绝对定位.

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1.test
        {
            position:fixed;
            left:20%;
            top:20%
        }
    </style>
</head>
<body>
<h1 class="test">使用fixed绝对定位</h1>
</body>
</html>

运行结果:
在这里插入图片描述

问:既然都是绝对定位,那么fixed和absolute有什么区别的?

让我们来做一组实验吧.

我们在如下代码中,让标题的position分别为absolute和fixed,进行试验.

当position为absolute的时候:

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            height: 100%;
        }
        h1.test
        {
            position:absolute;
            left:50px;
            top:50px
        }
        .different
        {
            position: absolute;
            top: 200px;
            left: 200px;
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
<div class="different">
    <h1 class="test">使用absolute绝对定位</h1>
</div>

</body>
</html>

运行结果:
在这里插入图片描述
当position为fixed的时候:

你是否看出了些区别呢?如果这样还不够明显,那我们借助Chrome浏览器的F12观察一下.

当position为absolute的时候:

在这里插入图片描述

我们可以看到,<h1></h1>标题元素是在<div>元素中进行定位的.

而当position=fixed的时候:

在这里插入图片描述

我们发现,<h1></h1>元素没有在块中进行定位.

而这就是二者的区别.

虽然二者都是绝对定位:

fixed的绝对定位,是相对于浏览器窗口进行的定位.

absolute的绝对定位是相对于他的第一个父元素进行的定位.

这也就说明了在刚才的例子中,同为绝对定位的fixed和absolute的差别原因啦.

relative
relative的作用是,生成相对定位的元素，相对于其正常位置进行定位。

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1.left{
        position:relative;
        left:-20px
        }
        h1.right
        {
            position:relative;
            left:20px
        }
    </style>
</head>
<body>
<h1>正常位置</h1>
<h1 class="left">相对于其正常位置向左移动</h1>
<h1 class="right">相对于其正常位置向右移动</h1>
</body>
</html>

运行结果:
在这里插入图片描述
5. inherit

inherit则可以继承其父元素的position的值.

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html{
            height: 100%;
        }
        .test1{
            position: fixed;
            top: 200px;
            left: 400px;
        }
        .test_inherit{
            position: inherit;
        }
    </style>
</head>
<body>
<div class="test1">
    <h1 class="test_inherit">123123</h1>
</div>
</body>
</html>

运行结果:
在这里插入图片描述
可以看到,我们并没有对标题进行定位,他只是继承了父元素的定位信息,然后进行了显示.

还有一个小的知识点是z-index属性
这个属性的作用,就是规定元素的显示层级.
z-index的值越大,元素显示的层级越高.
也就相当于越接近我们.

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .test_x{
            z-index: 1;
        }
        .test_index{
            position:absolute;
            left:0;
            top:0;
            z-index: -1;
        }
    </style>
</head>
<body>
<h1 class="test_x">123123</h1>
<img class="test_index" src="闪电侠.jpg" alt="图片被意大利炮轰走了"/>
</body>
</html>

运行结果:
在这里插入图片描述

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .test_x{
            z-index: 1;
        }
        .test_index{
            position:absolute;
            left:0;
            top:0;
            z-index: 2;
        }
    </style>
</head>
<body>
<h1 class="test_x">123123</h1>
<img class="test_index" src="闪电侠.jpg" alt="图片被意大利炮轰走了"/>
</body>
</html>