本文共 1693 字，大约阅读时间需要 5 分钟。

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效果

    
           
123
456
789

执行结果:

②不添加static效果

    
       
123
456
789

执行效果:

由此我们可以看出:

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

2. absolute

    
           
绝对定位

运行结果:

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

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

    
           
绝对定位

运行结果:

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

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

    
           
使用fixed绝对定位

运行结果:

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

让我们来做一组实验吧.

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

当position为absolute的时候:

    
           
   
    
    
使用absolute绝对定位
   

运行结果:

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

当position为absolute的时候:

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

而当position=fixed的时候:

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

而这就是二者的区别.

虽然二者都是绝对定位:

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

absolute的绝对定位是相对于他的第一个父元素进行的定位. 这也就说明了在刚才的例子中,同为绝对定位的fixed和absolute的差别原因啦.

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

    
           
正常位置
相对于其正常位置向左移动
相对于其正常位置向右移动

运行结果:

5. inherit

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

    
           
   
    
    
123123
   

运行结果:

可以看到,我们并没有对标题进行定位,他只是继承了父元素的定位信息,然后进行了显示.

还有一个小的知识点是z-index属性

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

    
           
123123

运行结果:

    
           
123123

运行结果:

由此可见,z-index越大,就越在上面显示.

转载地址：https://kaisarh.blog.csdn.net/article/details/103168851 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！