CSS的四种定位方式详解

在CSS中定位使用position属性来设置,有以下4种取值:

  1. 静态定位 - static
  2. 相对定位 - relative
  3. 绝对定位 - absolute
  4. 固定定位 - fixed

本文举例所用的材料

三个不同颜色的元素,都设置了同样的大小和左浮动。

本文的例子主要操作B元素。


 

静态定位 - static

静态定位是css中的默认定位方式,也就是没有定位,处于正常文档流中。

将B元素设置为静态定位,并设置top和left属性为10px

.B {
	position: static;
	top: 10px;
	left: 10px;
}

效果图如下: 

可以看到B元素没有任何反应,因为默认就是静态定位,在此定位方式中设置:top,bottom,left,right,z-index 这些属性都是无效的。


相对定位 - relative

相对定位的相对很有意思,只要搞清楚相对于谁就能理解相对定位的含义。

请看下面的栗子,将B元素设置为相对定位,top和left属性都为0

.B {
	position: relative;
	top: 0;
	left: 0;
}

 效果如下:

B元素没有反应,这是因为相对定位是相对于自身定位,top和left为0就相当于原位不动

再看一个例子,将top和left属性值改为10px

 

可以看到B元素偏移了10px,并且C元素(蓝色)并没有浮到A元素旁边,而是被无形的东西挡住了。

相对定位的特点就是元素本身在文档流中的占位不变,无形的东西就是B元素在文档流中的占位,这也是为什么C元素不会浮动过去的原因。可以想象成B元素的本体依然处于普通文档流中,它的替身在参照本体进行移动。(本体和替身是为了比喻,并不是官方说法)

为了更好理解相对于自身定位,请看下图:

 黑点表示B元素本体的左上角,绿色的是它的替身,可以看出替身是参照B元素本体的左上角那个点进行偏移。(本体就是透明的占位的部分)

将B元素宽度增加,效果如下:

可以更明显的看出B元素在普通文档流中占位的痕迹。


绝对定位 - absolute

我在刚开始学习的时候一度被绝对这个词所误导,以为绝对定位是想去哪就去哪。

实际上绝对定位是参考父元素的相对定位来实现的,听起来不好理解,我们先做个最简单的例子。

设置B元素为绝对定位,top和left属性为0

.B {
	position: absolute;
	top: 0;
	left: 0;
}

效果如下:

我们看到元素B被定位到了页面的左上角,并且元素B脱离了普通文档流(元素C浮到元素A旁边,没有占位)

那么我们可以认为绝对定位是参照页面左上角进行定位吗?答案是不可以,绝对定位并不是参照页面进行定位,而是参照父元素的relative进行定位,如果元素的所有父元素都没有设置relative,那么将参照根元素html进行定位,这就是B元素跑到了页面左上角的原因。

根据上述说法,假如将B元素设置为relative,再增加一个元素D作为子元素,操作D元素进行绝对定位是不是就会参照父元素B了呢?

在B元素里加入一个子元素D,并设置B元素为相对定位,D元素为绝对定位。(B与D是父子关系)

/* 父元素 */
.B {
	position: relative;
	top: 0;
	left: 0;
}

/* 子元素 */
.D {
	position: absolute;
	top: 10px;
	left: 10px;
}

效果如下:

可以看出我们的结论是对的,紫色的元素D确实是参照父元素B左上角的点进行偏移的。

如果取消B元素的相对定位,那么元素D会跑到页面左上角,也就是参照html元素进行偏移。

我们看看猜测是否正确:

取消B元素的相对定位,D元素不变

/* 父元素 */
.B {
	
}

/* 子元素 */
.D {
	position: absolute;
	top: 10px;
	left: 10px;
}

效果如下:

答案是正确的,元素D的所有父元素都没有设置relative,所以会参照根元素html进行偏移。


固定定位 - fixed

固定定位比较简单,就是根据页面进行偏移,不管如何滑动页面都不会被改变,完全脱离文档流。

设置元素B为固定定位,top和left为50%

.B {
	position: fixed;
	top: 50%;
	left: 50%;
}

效果如下:

固定定位就是参照页面左上角进行偏移,这个没啥好说的。即使页面内容滚动,依然保持不变。常见在博客左右两边的固定元素。

比如这个:

可以看到滚动条快到底了,元素位置依然不变。

小知识:css中的定位的偏移量都是通过参照元素和被参照元素的左上角的点进行偏移,所以50%的偏移量并不是真正意义上的居中,还要减去自身宽度或高度的一半。


z-index属性

z-index属性是设置元素的层级,数值低的会被数值高的遮住,举个栗子:

/* 红色元素 */
.A {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 3;
}

/* 绿色元素 */
.B {
	position: fixed;
	top: 40px;
	left: 40px;
	z-index: 2;
}

/* 蓝色元素 */
.C {
	position: fixed;
	top: 60px;
	left: 60px;
	z-index: 1;
}

效果如下:

可以看到A元素的z-index值最大,所以显示在最前面。B元素(绿色)数值中间,显示夹在中间。C元素(蓝色)数值最小,显示在最后被遮住。


PS:我是第一次写博客文章,文笔不好还请见谅。如有错误,欢迎指出!

另外我这个QQ邮箱小时候被我阴差阳错注册过,然后就没用过了。现在登录CSDN发现显示8年码龄,我人都傻了,要是这样算从我小学6年级就开始写代码了哈哈哈哈,我现在还是个在校大学生呢。

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战,可谓是杀敌无数,见怪不怪了!在某知识社交平台中,一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读,可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表:零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时,为空表。 在比较复杂的线性表中,一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言,按照其应用领域,可以粗略地分成三类。 有的语言是多面手,在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类,比如说 C,Java, Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后,该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情,很多情况下,他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言,首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图: 上码: 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况,重点关注在中国市场扮演重要角色的全球及本土铪生产商,呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外,针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…