postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值:

  • position: absolute
  • position: relative
  • position: fixed
  • position: static
  • position: inherit

本文主要详细讨论 position 属性的前三个值,首先大概讲解下后两个值:

static

staticposition 属性的默认值,static 元素会遵循正常的文档流,且会忽略 top,bottom,left,right 等属性。

inherit

inherit 值如同其他 css 属性的 inherit 值,即继承父元素的 position 值。

absolute

absolute 元素将会脱离正常的文档流,所以 其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时,我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性,topbottom,leftright

这个绝对定位需要稍微理解下,因为这里容易与 relative 产生混淆。

例如,当对 absolute 元素添加 left:10px 定位后,这个 left 究竟是对哪个元素而言呢?其实,此时将会往上查找 absolute 元素的第一个父元素,如果该父元素的 position 值存在且不为 static),那么这个 left:10px 就是根据该父元素进行的定位,否则将会继续查找该父元素的父元素,一直追溯到某个父元素具备不为 staticposition 值为止,如果不存在满足条件的父元素,则会根据最外层的 window 进行定位。

<div style="position: absolute">Im an absolute element</div>
<div>Im a default element</div>

//直接忽略 absolute 元素的存在

relative

relative 元素遵循正常的文档流,所以周围元素不会忽略它的存在,relative 元素同样支持 top,bottom,left,right 等属性。当我们使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果,但是区别在于, relative 元素周围的元素将会忽略 relative 元素的移动。我们注意,当 relative 元素未使用定位属性进行相对定位时,它不会被周围的元素忽略,但利用定位属性进行定位后,周围的元素会忽略 relative 元素的移动,它们会认为 relative 元素仍然在原来的位置,并未进行移动,我们用个例子来说明:

<div style="position: relative">Im a relative element</div>
<div>Im a default element</div>

//并未忽略 relative 元素的存在

<div style="position: relative;top:10px">Im a relative element</div>
<div>Im a default element</div>

//忽略了 relative 元素的移动

fixed

fixed 元素将会脱离正常的文档流,所以它与 absolute 元素很相似,同样会被周围元素忽略,支持 top,bottom,left,right 属性,但两者仍有很大不同。

首先,fixed 元素定位与它的父元素无任何关系,它永远是相对最外层的 window 进行定位的。

第二,fixed 元素正如它的名字一样,它是固定在屏幕的某个位置,它不会因为屏幕的滚动而消失。

<div style="height:1000px">
<div style="position: absolute;">Im an absolute element</div>
<div style="position: fixed;">Im a fixed element</div>
<div>Im a default element</div>
</div>

//如同 absolute,fixed元素也被周围元素忽略

因为外层 div 高度超过一屏,所以现在我们往下滚动屏幕。

//只有 fixed 元素未因为屏幕滚动而消失,因为它是“固定”的

z-index

为什么要在这里提到 z-index 属性呢?那是因为 z-index 属性只对定位元素有效,即 position 值为 absolute,relative,fixed 时才有效。我们首先了解下什么叫 z-index

      

从上图我们不难发现 z-index 值代表的是元素的堆叠顺序,值越高则显示顺序越优先。

<div style="position: absolute;z-index:1">Im an absolute element</div>
<div style="position: fixed;z-index:2">Im a fixed element</div>

//fixed 元素 z-index 比 absoulute 元素高,所以显示在前面

(我把背景色调为非透明,这样可以看得更清楚),假如 z-index 值相同会出现什么情况呢?

<div style="position: absolute;z-index:1">Im an absolute element</div>
<div style="position: fixed;z-index:1">Im a fixed element</div>

//z-index 值相同,仍然显示为 fixed 元素

所以我们知道,当 z-index 值相同时,后加载的元素显示优先。

参考

http://www.vanseodesign.com/css/css-positioning/

详解 CSS 属性 - position的更多相关文章

  1. (转)实例详解CSS中position的fixed属性使用

    关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...

  2. 详解 CSS 属性 - :before && :after

    现在我们经常在 html 源码中看到如下的写法: 这里的 ::after 和 ::before 就是我们今天来探讨的 css 伪元素之二 - :before && :after. 伪元 ...

  3. 《转载》详解 CSS 属性 - 伪类和伪元素的区别

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  4. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  5. 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  6. 详解CSS float属性

    CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...

  7. 详解CSS float属性(转)

    详解CSS float属性   阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...

  8. 详解CSS的相对定位和绝对定位(讲得很详细)

    详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...

  9. 详解CSS盒模型(转)

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

随机推荐

  1. c#修改密码后实现重新登录

    C#中密码修改成功后,提示"密码修改成功,请重新登录.当用户一点确定的时候就跳到登录界面 直接重启程序就是了,在弹出个Messages.show("密码修改成功,请重新登录.&qu ...

  2. LeetCode-057-插入区间

    插入区间 题目描述:给你一个 无重叠的 ,按照区间起始端点排序的区间列表. 在列表中插入一个新的区间,你需要确保列表中的区间仍然有序且不重叠(如果有必要的话,可以合并区间). 示例说明请见LeetCo ...

  3. k8s集群StatefulSets的Pod优雅调度问题思考?

    k8s集群StatefulSets的Pod优雅调度问题思考 考点之你能解释一下为什么k8s的 StatefulSets 需要VolumeClaimTemplate嘛? 考点之简单描述一下Statefu ...

  4. 矩池云上nvidia opencl安装及测试教程

    本教程租用的是2080ti,3.7多框架镜像. 添加nvidia-cuda的阿里源 curl -fsSL https://mirrors.aliyun.com/nvidia-cuda/ubuntu18 ...

  5. laravel7 微信小程序获取openid

    l 通过微信公众号获取appid和appsecret l 在小程序页面中编写代码获取code l 在后端编写方法,换取openid l 添加一个按钮,给按钮一个开放能力 open-type=" ...

  6. 用xshell连接VMware中的Linux

    配置静态网址 1.配置网络连接方式 2.查看虚拟机中的网段 3.进登录linux系统,输入:ip addr 根据自己实际情况决定下一步的语句,例如本文为ens33 , 下一步为ifcfg-ens33 ...

  7. spring源码干货分享-对象创建详细解析(set注入和初始化)

    记录并分享一下本人学习spring源码的过程,有什么问题或者补充会持续更新.欢迎大家指正! 环境: spring5.X + idea 建议:学习过程中要开着源码一步一步过 Spring根据BeanDe ...

  8. LGP6825题解

    科技的力量!!!!!!我德意志科技天下第一!!! 这是一篇需要一点儿科技的题解,但实际上这个科技我认为甚至算不上科技,太 simple 了. 首先是推柿子: \[\sum_{i=1}^n\sum_{j ...

  9. Linux卸载源码编译安装的软件

    使用auto-apt 和 checkinstall,具体命令如下 #安装auto-apt和checkinstall apt install auto-apt checkinstall #在源码目录中 ...

  10. 手写 Vue2 系列 之 patch —— diff

    前言 上一篇文章 手写 Vue2 系列 之 初始渲染 中完成了原始标签.自定义组件.插槽的的初始渲染,当然其中也涉及到 v-bind.v-model.v-on 指令的原理.完成首次渲染之后,接下来就该 ...