欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS 中 position属性和z_index

程序员文章站 2022-05-28 11:02:34
...

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属性的值

让我们来分别演练一下:

  1. 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>

执行结果:
CSS 中 position属性和z_index
②不添加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>

执行效果:
CSS 中 position属性和z_index
由此我们可以看出:

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

  1. 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>

运行结果:
CSS 中 position属性和z_index
CSS 中 position属性和z_index
CSS 中 position属性和z_index
大家可以看出,虽然我不断将屏幕放大,但是标题的位置始终没有改变.始终都是距离左边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>

运行结果:
CSS 中 position属性和z_index
CSS 中 position属性和z_index
虽然感官上有所变化,但左边和上边都是距离20%,仍然是绝对定位.

  1. 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>

运行结果:
CSS 中 position属性和z_index
CSS 中 position属性和z_index
问:既然都是绝对定位,那么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>

运行结果:
CSS 中 position属性和z_index
当position为fixed的时候:
CSS 中 position属性和z_index
你是否看出了些区别呢?如果这样还不够明显,那我们借助Chrome浏览器的F12观察一下.

当position为absolute的时候:

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

而当position=fixed的时候:

CSS 中 position属性和z_index
CSS 中 position属性和z_index

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

而这就是二者的区别.

虽然二者都是绝对定位:

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

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

这也就说明了在刚才的例子中,同为绝对定位的fixed和absolute的差别原因啦.
  1. 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>

运行结果:
CSS 中 position属性和z_index
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>

运行结果:
CSS 中 position属性和z_index
可以看到,我们并没有对标题进行定位,他只是继承了父元素的定位信息,然后进行了显示.

还有一个小的知识点是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>

运行结果:
CSS 中 position属性和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: 2;
        }
    </style>
</head>
<body>
<h1 class="test_x">123123</h1>
<img class="test_index" src="闪电侠.jpg" alt="图片被意大利炮轰走了"/>
</body>
</html>

运行结果:
CSS 中 position属性和z_index
由此可见,z-index越大,就越在上面显示.

上一篇： 记一次ES日志系统的接入

下一篇： pyqt5学习笔记(4) QWidget

推荐阅读