CSS:position属性和z_index
发布日期:2021-06-30 15:42:58
浏览次数:2
分类:技术文章
本文共 1693 字,大约阅读时间需要 5 分钟。
position属性算是一个很常用的属性了,但是一直搞得不是很明白.
今天抽空彻底研究了一下,做一下记录.首先,position可能的值有以下几种:
值 | 描述 |
---|---|
static | 默认值.没有特殊的定位,元素出现在正常的流中.(忽略 top, bottom, left, right 或者 z-index 声明) |
absolute | 生成绝对定位元素,相对于static定位以外的第一个父元素进行定位.元素的位置通过"left",“top”,“right”,"bottom"进行规定 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位.元素的位置通过"left",“top”,“right”,"bottom"进行规定 |
ralative | 生成相对定位的元素,相对于其正常位置进行定位.例如:“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
inherit | 规定应该从父元素继承position属性的值 |
让我们来分别演练一下:
- static ①添加static效果
Title 123
456
789
执行结果:
②不添加static效果Title 123
456
789
执行效果:
由此我们可以看出:static作为默认值,是否添加对样式是没有影响的.
- absolute
Title 绝对定位
运行结果:
大家可以看出,虽然我不断将屏幕放大,但是标题的位置始终没有改变.始终都是距离左边100px,上边150px.而如果我将固定的像素值改为百分比,虽然感官有变化,但仍是绝对定位.
Title 绝对定位
运行结果:
虽然感官上有所变化,但左边和上边都是距离20%,仍然是绝对定位.- fixed fixed的效果也是绝对定位.
Title 使用fixed绝对定位
运行结果:
问:既然都是绝对定位,那么fixed和absolute有什么区别的?让我们来做一组实验吧.
我们在如下代码中,让标题的position分别为absolute和fixed,进行试验.
当position为absolute的时候:
Title 使用absolute绝对定位
运行结果:
当position为fixed的时候: 你是否看出了些区别呢?如果这样还不够明显,那我们借助Chrome浏览器的F12观察一下.当position为absolute的时候:
我们可以看到,<h1></h1>标题元素是在<div>元素中进行定位的.而当position=fixed的时候:
我们发现,<h1></h1>元素没有在块中进行定位.
而这就是二者的区别.
虽然二者都是绝对定位:
fixed的绝对定位,是相对于浏览器窗口进行的定位. absolute的绝对定位是相对于他的第一个父元素进行的定位. 这也就说明了在刚才的例子中,同为绝对定位的fixed和absolute的差别原因啦.- relative relative的作用是,生成相对定位的元素,相对于其正常位置进行定位。
Title 正常位置
相对于其正常位置向左移动
相对于其正常位置向右移动
运行结果:
5. inheritinherit则可以继承其父元素的position的值.
Title 123123
运行结果:
可以看到,我们并没有对标题进行定位,他只是继承了父元素的定位信息,然后进行了显示.还有一个小的知识点是z-index属性
这个属性的作用,就是规定元素的显示层级. z-index的值越大,元素显示的层级越高. 也就相当于越接近我们.Title 123123
运行结果:
Title 123123
运行结果:
由此可见,z-index越大,就越在上面显示.转载地址:https://kaisarh.blog.csdn.net/article/details/103168851 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2024年04月24日 12时33分30秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
查询亿级数据毫秒级返回!Elasticsearch 是如何做到的?
2019-05-01
FastAPI 构建 API 服务,究竟有多快?
2019-05-01
为什么Quora选择用Python语言?
2019-05-01
一劳永逸学编程的方法
2019-05-01
代码整洁之道-编写 Pythonic 代码
2019-05-01
100行python代码,轻松完成贪吃蛇小游戏
2019-05-01
如何科学的刷 Leetcode
2019-05-01
树莓派程序开机自启动
2019-05-01
WiFi强力信号连接方案
2019-05-01
连锁门店无线通信方案
2019-05-01
配置Lotus Domino集群视频详解
2019-05-01
通过PXE安装Linux实况
2019-05-01
Cisco交换机SPAN&RSPAN调试实录
2019-05-01
轻松掌握Ubuntu Linux的3D桌面快捷键使用
2019-05-01
通过视频展示如何通过Samba配置PDC
2019-05-01
OSSIM(开源安全信息管理系统)在企业网络管理中的应用
2019-05-01
如何搭建Eclipse +Apache Tomcat配置Java开发环境
2019-05-01
开源计算机集群监控Ganglia应用视频
2019-05-01
Linux软件万花筒
2019-05-01