细说css中的position属性
有过css
开发经验的同学,对于position
这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css
的世界是有一定的江湖地位的,那么我们就来详细的说说position
这个属性。
在w3school中是这样解释position
属性的
定义和用法
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
CSS 定位机制
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
position
属性对应的值有
position: static;
position: inherit;
position: relative;
position: absolute;
position: fixed;
position: sticky;
(新的属性值)
1、position: static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right
或者 z-index
声明)。元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
2、position: inherit
inherit
值如同其他css
属性的 inherit
值,即继承父元素的position
值。
3、position: relative
相对定位,相对于自己的初始位置,不脱离文档流。也就是说元素框偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留。
举个例子,html
结构
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
css
样式
div {
width: 100px;
height: 100px;
}
.div1 {
background: #ffff00;
}
.div2 {
background: #00ff00;
position: relative;
top: 40px;
left: 40px;
}
.div3 {
background: #0000ff;
}
结果
其中红色框为div2
的初始位置,由于div2
设置了position:relative;top: 40px;left: 40px;
,所以该元素相对于自己的初始位置的上面40px
、左边40px
。同时,其他元素的位置未被改变。
4、position: absolute
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
例子中我们把div2
的样式稍作改动
.div2 {
background: #00ff00;
position: absolute;
top: 40px;
left: 40px;
}
由于div2
的祖先元素都没有定位,所以相对于最初的包含块也就是body
,同时由于绝对定位脱离文档流,所以div3
占了div2
原来的位置。
5、position: fixed
fixed
元素脱离正常的文档流,所以它与absolute
元素很相似,同样会被周围元素忽略,支持top,bottom,left,right
属性,但fixed
元素正如它的名字一样,它是固定在屏幕的某个位置,它不会随着浏览器滚动条的滚动而一起滚动。比如我们常见的回到顶部
的功能,按钮一直在浏览器的左下方,不管滚动条如何滚动,该按钮都会在左下方的固定的位置,这个需求就可以使用position: fixed
来完成。
但需要注意的是,position: fixed
是有兼容性问题的,不支持IE6、IE7、IE8
。可以通过给该元素设置position: absolute
并获取滚动条距离顶部高度加上某个固定高度来实现。
6、position: sticky
很多同学会对该属性比较陌生,这是一个相对来讲比较新的属性值。
sticky 的本意是粘贴,可以称之为粘性定位,但在 css 中的表现更像是吸附。这是一个结合了 position:relative
和 position:fixed
两种定位功能于一体的特殊定位。常见的吸顶、吸底(网站的头部返回栏,底部切换栏之类)的效果用这个属性非常适合。例如下面淘宝这个效果
当元素距离页面视口(Viewport,也就是fixed定位的参照)顶部距离大于 0px 时,元素以 relative 定位表现,而当元素距离页面视口小于 0px 时,元素表现为 fixed 定位,也就会固定在顶部。
注意
- 须指定
top、right、bottom、left
四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
并且top
和bottom
同时设置时,top
生效的优先级高,left
和right
同时设置时,left
的优先级高。 - 设定为
position:sticky
元素的任意父节点的overflow
属性必须是visible
,否则position:sticky
不会生效。如果position:sticky
元素的任意父节点定位设置为overflow:hidden
,则父容器无法进行滚动,所以position:sticky
元素也不会有滚动然后固定的情况。如果position:sticky
元素的任意父节点定位设置为position:relative | absolute | fixed
,则元素相对父元素进行定位,而不会相对viewport
定位。 - 达到设定的阀值,也就是设定了
position:sticky
的元素表现为relative
还是fixed
是根据元素是否达到设定了的阈值决定的。
兼容性 caniuse
细说css中的position属性的更多相关文章
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- 细说CSS中的display属性
相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- css中的position属性值的探究
css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- CSS中的position属性笔记
一般有5个属性,分别是:static,absolute,relative,fixed,inherit static 自然定位:这个是默认值,没有定位,再设置top,rignt,bottom,left会 ...
随机推荐
- 项目中引入composer
众所周知,composer可以自定义加载插件库和依赖,它也是用PHP写的,怎样在自己的项目中引入并使用composer呢?. 1.新建一个项目,在项目的根目录创建composer.json文件,用过一 ...
- apache 改变文档根目录www的位置
1.找到apache的安装目录,找到config/httpd.conf,找到DocumentRoot "D:/wamp/www/" 改成你想要的目录,例如:改成 DocumentR ...
- Linux命令之tar-rsync
一.tar命令 可以对文件和目录进行打包压缩(相较于zip.gzip.bzip2不能对目录进行压缩,tar是一大优势) 用途:制作归档文件.释放归档文件 基本格式: 压缩---> tar [选 ...
- 移动端页面点击a标签会有半透明的阴影或红色边框的bug
好久没有更新了,今天来一发 ^_^ 最近在写移动端页面,测试时发现一个a标签的bug:无论是iOS端还是Android端都存在,当点击a标签,会有一个矩形的透明的阴影闪一下(不同的浏览器阴影的颜色还不 ...
- SpringBoot中过滤器、监听器以及拦截器
属于javax.servlet所提供的Api 拦截器原理 简单来讲是通过动态代理实现,被访问的目标方法通过代理类(方法)来执行,这样我们就可以在真正要执行的方法执行前.后做一些处理: 通过拦截器这种方 ...
- 使用C#开发C/S框架高级版添加新项目实例
操作步骤: 1.新建一个项目CSFramework3.test,在CSFramework3.test项目下新建一个FormMan窗口(此时不需要继承). 2.按F7打开类,替换一下引用 using S ...
- hihoCoder 1493 : 歌德巴赫猜想 素数筛法
题意:哥德巴赫猜想认为"每一个大于2的偶数,都能表示成两个质数之和".给定一个大于2的偶数N,你能找到两个质数P和Q满足P<=Q并且P+Q=N吗?如果有多组解,输出P最小的一 ...
- nyoj940 A dp problem 打表
首先枚举i,那么构成i^2的最小值为1个正方形,当然1~1000并不会都得到答案,那么剩下的数字就递增枚举这些数,这个数可能右多对数构成,则枚举这些数.例如 5 = 1 + 4, 5 = 2 + 3, ...
- Web开发框架推导
本文欲回答这样一个问题:在 「特定环境 」下,如何规划Web开发框架,使其能满足 「期望 」? 假设我们的「特定环境 」如下: 技术层面 使用Java语言进行开发 通过Maven构建 基于Spring ...
- 30分钟掌握ES6/ES2015核心内容(上)
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...