详解 CSS 属性 - position
postion
属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值:
- position: absolute
- position: relative
- position: fixed
- position: static
- position: inherit
本文主要详细讨论 position
属性的前三个值,首先大概讲解下后两个值:
static
static
为 position
属性的默认值,static
元素会遵循正常的文档流,且会忽略 top,bottom,left,right
等属性。
inherit
inherit
值如同其他 css
属性的 inherit
值,即继承父元素的 position
值。
absolute
absolute
元素将会脱离正常的文档流,所以 其周围的元素将会忽略它的存在。如同 absolute
元素的 display
属性被设为了 none
一样。此时,我们可以使用 top,bottom,left,right
等属性对 absolute
元素进行绝对定位。一般情况下定义两个属性,top
或 bottom
,left
或 right
。
这个绝对定位需要稍微理解下,因为这里容易与 relative
产生混淆。
例如,当对 absolute
元素添加 left:10px
定位后,这个 left
究竟是对哪个元素而言呢?其实,此时将会往上查找 absolute
元素的第一个父元素,如果该父元素的 position 值存在
(且不为 static
),那么这个 left:10px
就是根据该父元素进行的定位,否则将会继续查找该父元素的父元素,一直追溯到某个父元素具备不为 static
的 position
值为止,如果不存在满足条件的父元素,则会根据最外层的 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
值相同时,后加载的元素显示优先。
参考
详解 CSS 属性 - position的更多相关文章
- (转)实例详解CSS中position的fixed属性使用
关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...
- 详解 CSS 属性 - :before && :after
现在我们经常在 html 源码中看到如下的写法: 这里的 ::after 和 ::before 就是我们今天来探讨的 css 伪元素之二 - :before && :after. 伪元 ...
- 《转载》详解 CSS 属性 - 伪类和伪元素的区别
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- 详解 CSS 属性 - 伪类和伪元素的区别[转]
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)
首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...
- 详解CSS float属性
CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...
- 详解CSS float属性(转)
详解CSS float属性 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...
- 详解CSS的相对定位和绝对定位(讲得很详细)
详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...
- 详解CSS盒模型(转)
详解CSS盒模型 阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...
随机推荐
- c#修改密码后实现重新登录
C#中密码修改成功后,提示"密码修改成功,请重新登录.当用户一点确定的时候就跳到登录界面 直接重启程序就是了,在弹出个Messages.show("密码修改成功,请重新登录.&qu ...
- LeetCode-057-插入区间
插入区间 题目描述:给你一个 无重叠的 ,按照区间起始端点排序的区间列表. 在列表中插入一个新的区间,你需要确保列表中的区间仍然有序且不重叠(如果有必要的话,可以合并区间). 示例说明请见LeetCo ...
- k8s集群StatefulSets的Pod优雅调度问题思考?
k8s集群StatefulSets的Pod优雅调度问题思考 考点之你能解释一下为什么k8s的 StatefulSets 需要VolumeClaimTemplate嘛? 考点之简单描述一下Statefu ...
- 矩池云上nvidia opencl安装及测试教程
本教程租用的是2080ti,3.7多框架镜像. 添加nvidia-cuda的阿里源 curl -fsSL https://mirrors.aliyun.com/nvidia-cuda/ubuntu18 ...
- laravel7 微信小程序获取openid
l 通过微信公众号获取appid和appsecret l 在小程序页面中编写代码获取code l 在后端编写方法,换取openid l 添加一个按钮,给按钮一个开放能力 open-type=" ...
- 用xshell连接VMware中的Linux
配置静态网址 1.配置网络连接方式 2.查看虚拟机中的网段 3.进登录linux系统,输入:ip addr 根据自己实际情况决定下一步的语句,例如本文为ens33 , 下一步为ifcfg-ens33 ...
- spring源码干货分享-对象创建详细解析(set注入和初始化)
记录并分享一下本人学习spring源码的过程,有什么问题或者补充会持续更新.欢迎大家指正! 环境: spring5.X + idea 建议:学习过程中要开着源码一步一步过 Spring根据BeanDe ...
- LGP6825题解
科技的力量!!!!!!我德意志科技天下第一!!! 这是一篇需要一点儿科技的题解,但实际上这个科技我认为甚至算不上科技,太 simple 了. 首先是推柿子: \[\sum_{i=1}^n\sum_{j ...
- Linux卸载源码编译安装的软件
使用auto-apt 和 checkinstall,具体命令如下 #安装auto-apt和checkinstall apt install auto-apt checkinstall #在源码目录中 ...
- 手写 Vue2 系列 之 patch —— diff
前言 上一篇文章 手写 Vue2 系列 之 初始渲染 中完成了原始标签.自定义组件.插槽的的初始渲染,当然其中也涉及到 v-bind.v-model.v-on 指令的原理.完成首次渲染之后,接下来就该 ...