position 的属性值

理论上来说,全部 position 的取值有8个

包括:position:static | relative | absolute | fixed | sticky |  initial | inherit | unset

其中最常用的是 static 、relative、absolute、fixed 和 sticky

initial、inherit、unset 是css的关键字,任何css属性的取值都可以设置这几个值

 

position: static

默认值,在正常流中,对设置的 top 、left、right、bottom、z-index 一应忽略

 

position: relative

相对定位,相对于自己原来的位置偏移,(例:top: 10px; // 移动后元素顶部位于原位置顶部下10px;)

脱离文档流,但在文档流中保留原位置的空间(预留空间),

也就是说,元素原来位置会一直保留空白占位,相邻兄弟元素会保持原来的位置,不会随元素的移动而改变

注意:position: relative 对 table-*-group,table-row,table-column,table-cell,table-caption 元素无效。

栗子:

 

position: absolute

绝对定位,若祖先元素有设置 position: static 以外的属性值,则相对该祖先元素绝对定位;否则,相对浏览器视口绝对定位

(在这里说一个注意点,大多数人认为是相对 html 或 body 元素绝对定位,这是个误区;当页面是可滚动的,就可以看出是相对浏览器窗口绝对定位的了,而不是整个 html 内容;这里我也懒得写例子了,我就直接借鉴别人的吧:CSS进阶——绝对定位元素的宽高是如何定义的

因此,一般做法是将该绝对定位元素的父元素加上 position: relative 属性

脱离文档流,不预留空间,该元素下的兄弟元素位置上移

栗子:

 

但 position: absolute 并不仅有以上这个用途;

在按其内容大小调整尺寸的元素(例如 height 和 width 被设定为 auto,又或者行内元素),若该元素被绝对定位 position: absulute ,则可以通过指定 top / bottom / left / right , 保留 height 未指定(即 auto), 来填充可用的垂直(水平)空间

什么意思呢?淡定,来吃些栗子吧:

(除此之外,绝对定位的元素可以设置外边距(margin),且不会与其他边距合并,这个就不举栗子了)

 

写上面例子的时候还是有个疑问的:

既然绝对定位是脱离文档流的,为什么行内元素绝对定位的时候,在不设置 left 值时,它的原点是位于原位置的原点的呢?而不是位于父元素的原点呢?

(找了许久没找着原因,这个留着以后慢慢解答吧)

 

position: fixed

固定定位,相对浏览器窗口固定定位,不随滚动条滚动,实现的样本就是日常网页中的广告弹窗

脱离文档流,fixed 属性会创建新的层叠上下文。

注意:当该固定元素的祖先元素的 transform 属性非 none 时,容器由浏览器窗口改为该祖先元素

 

position: sticky

粘性定位,相当于相对定位和固定定位的混合。粘性定位根据一个阈值决定,在大于等于阈值时采用相对定位,小于阈值后则为固定定位。

这个阈值就是 top 、right 、bottom 、left 四种之一,必须设置了其中一个,才能让粘性定位生效,否则一直表现为相对定位。

粘性定位除了以上条件之外,还有几点需要注意,否则粘性定位会失效

1. 父元素的内容需滚动查看,且不能有 overflow: hidden 、 overflow: auto 属性

2. 父元素的高度不能低于粘性定位元素的高度

3. sticky 是容器相关的,只会在它所处的容器(父元素)里生效。

sticky 栗子:demo

粘性定位的兼容问题:

 1. 需写下两条css语句:

  position: sticky;  和 position: -webkit-sticky; /* Safari */

    2. Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 

 

position: initial

initial 关键字用于设置CSS属性为它的默认值(在这里也就是 position: static)

注: IE不支持该关键字

 

position: inherit

每个 CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。

关于 inherit 的妙用可以看看这里:谈谈一些有趣的CSS题目(四)– 从倒影说起,谈谈 CSS 继承 inherit

 

position: unset

unset 关键字是 initial 和inherit 的组合:

 1. 如果该属性是默认继承属性,则该值等同于 inherit

 2. 如果该属性是非继承属性,则该值等同于 initial

unset 的一些妙用可参考:有趣的CSS题目(15): 谈谈 CSS 关键字 initial、inherit 和 unset

 

至此,第一条博客总算是磕磕碰碰写完了,虽然一直也有做笔记总结,但是写出来还是觉得自己可能还有疏漏,写博客不容易,坚持写更是不容易了,由衷佩服那些让我学到知识的博客大牛们!感恩~

本文参考:

1. 有趣的CSS题目(15): 谈谈 CSS 关键字 initial、inherit 和 unset

2. 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

3. CSS进阶——绝对定位元素的宽高是如何定义的

4. MDN position属性

本文转载于:猿2048➺https://www.mk2048.com/blog/blog.php?id=ik1h1ib&title=position 的属性值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370641.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql数据库应用的权限层级_MySQL数据库的用户权限管理

嗨!各位小伙伴今天翻了一下历史记录MySQL 数据库还有点内容今天开始我们就来补上吧~用户权限管理伙伴们要知道,在数据库方面有两个方向。一个是数据库管理员(Database Administrator)简称DBA,一个是数据库开发工程师(Database Developer)&…

linux i2c adapter 增加设备_Linux驱动之I2C驱动架构

一、Linux的I2C体系结构主要由三部分组成:(1) I2C核心提供I2C控制器和设备驱动的注册和注销方法,I2C通信方法,与适配器无关的代码以及探测设备等。(2) I2C控制器驱动(适配器)(3) I2C设备驱动二、重要的结构体i2c_adapter//i2c控制器(适配器)i…

Alpha-end

前言 失心疯病源10团队代码管理github个人感悟 肝不动了,肝不动了。明天如果见不到我,不要太想我。站立会议 队名:PMS530雨勤(组长) 今天完成了那些任务 熬夜肝代码代码签入github明天的计划 肝到凌晨还剩下哪些任务 团…

避免写慢SQL

最近在整理数据库中的慢SQL,同时也查询了相关资料。记录一下,要学会使用执行计划来分析SQL。 1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存。这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的。当有很多相同…

为什么子孙后代会讨厌使用java.util.Stack

在我用无意义的重言式杀死你之前,这是要点 如果您的应用程序接近实时,或者将代码发送到Mars,则需要保留Java中默认的Stack实现。 根据LinkedList编写您自己的版本。 同样,如果您的应用程序是关键任务,并且希望堆栈由…

play 连接mysql_Play framework 2.x 连接mysql | 学步园

笔者所使用的系统为64位 windows7。本文假设java1.5版本以上环境已经搭好,play 框架已经下载至本地。首先我们创建一个项目。命令行进入play的目录命令:play new demo再次输入项目名字输入2 选择java项目创建完成界面OK,一个play框架下的java…

rpm -e --nodeps_微课 | rpm的思维导图

前导课程:微课 | rpm的查询、升级与卸载命令本次微课将演示使用xmind绘制rpm思维导图的过程,包括视频文字,大约需要你10分钟。另外,文末还有一则IT冷笑话,学习之余、会心一笑:)这个思维导图将包含以下内容:…

border-sizing属性详解和应用

box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式,不再冗赘。1. 属性讲解 content-box 默认值,也是css2.1中的盒子模型。在计算 width和…

Couchbase:使用Twitter和Java创建大型数据集

在播放/演示Couchbase或任何其他NoSQL引擎时,创建大型数据集的一种简单方法是将Twitter feed注入到数据库中。 对于这个小应用程序,我正在使用: Couchbase Server 2.0服务器 Couchbase Java SDK (将由Maven安装) T…

西门子scl语言编程手册_西门子SCL编程PEEK指令讲解

单词“peek”在英语中表示“偷看,瞥一眼”,在计算机编程中表示“读取数据”。在西门子SCL编程中,PEEK指令可以用来读取输入缓存区(I)、输出缓存区(Q)、位存储区(M)及数据块(DB)中的数据,常用作间接寻址。今天这篇文章,…

Guava的Collections2:过滤和转换Java集合

Groovy的便利之一是能够通过Groovy的闭包支持轻松地对集合执行过滤和转换操作。 Guava将对集合的过滤和转换引入标准Java,这是本文的主题。 Guava的Collections2类具有两个公共方法,这两个方法都是静态的。 方法filter(Collection&#xff0…

钉钉机器人怎么设置自动回复_项目部署成功后触发钉钉机器人发送消息提醒——入门配置...

钉钉建好一个群打开群设置, 找到群机器人添加一个你想要的机器人可以使用自定义自定义机器人可以自定义头像,名字,生成一个webhook(https post的请求地址)到这里, 钉钉机器人设置好了,接下来我们对照文档进行配置https://ding-doc.dingtalk.com/doc#/serverapi2/qf2nxq/XAzBI -…

mysql加锁语法_MySql 加锁问题

1、设置非自动提交 set autocommit0; 这时候 for update才会起作用2、一般用法 set autocommit0; for update(加锁) ; commit/rollback; set autocommit1;首先看一下,set autocommit0 后,执行哪些语句会自动加锁,加的是什么锁&#xff1f…

td过长,将固定宽度table撑开

解决办法: 在table上加上样式: table{table-layout:fixed;word-break:break-all} table-layout:fixed tablle的列宽由表格宽度和列宽设定。 word-break:break-all 允许在单词内换行。 正常情况下: table表格中td过长: 加上样式之后&#…

Android几秒后自动关闭dialog

代码改变世界 Android几秒后自动关闭dialog AlertDialog.Builder builder new AlertDialog.Builder(v.getContext());builder.setTitle("发送成功!");builder.setMessage("2秒后自动关闭!");builder.setCancelable(true);final Ale…

控制元素的div属性

1、需求分析 改变元素的宽、高、颜色、显示、重置等属性。 2、技术分析 基础的css、html、js 3、详细分析 如图&#xff0c;单击按钮&#xff0c;改变元素属性: 3.1 HTML部分 根据视图不难发现&#xff0c;内容分两大不分:按钮栏和效果图&#xff0c;所以设置两个div。 <…

使用JMeter和Yourkit进行REST / HTTP服务的性能分析

我的上一篇文章描述了如何使用JMeter完成异步REST / HTTP服务的压力测试或负载测试。 但是&#xff0c;运行这样的测试通常表明被测系统不能很好地应对不断增加的负载。 现在的问题是如何找到瓶颈&#xff1f; 深入研究代码以检测可疑部分可能是另一种选择。 但是考虑到潜在的…

java中间件_90%的Java程序员,都扛不住这波消息中间件的面试四连炮!

概述大家平时也有用到一些消息中间件(MQ)&#xff0c;但是对其理解可能仅停留在会使用API能实现生产消息、消费消息就完事了。对MQ更加深入的问题&#xff0c;可能很多人没怎么思考过。比如&#xff0c;你跳槽面试时&#xff0c;如果面试官看到你简历上写了&#xff0c;熟练掌握…

python 取array并集_Python内置数据结构原理与性能简易分析

ins ngladc文末左下方阅读原文指向了本人博客链接&#xff0c;不含广告。参考资料中的相关链接&#xff0c;可以在博客文章的最下方获取。推荐苹果手机用户使用浅色模式观看。前言 对于一些算法题&#xff0c;可以使用Python自带的内置函数解决。但很多时候用就用了&#xff0c…

ae合成复制脚本_稀缺资源—这几个AE脚本使用频率很高,赶紧收藏吧!

「第442期」毫无疑问&#xff0c;AE已经成为目前制作短视频比较主流的软件&#xff0c;效果的多样化深受很多创作者的喜爱。随着对软件的熟悉&#xff0c;越发觉得AE主要是基于多图层控制的软件。如果制作一些简单的效果&#xff0c;几个图层几个滤镜就可以搞定&#xff0c;但如…