定位流之z-index属性
1.固定定位是脱离标准流的，不会占用标准流的空间
2.和绝对定位有点像，也不区分行内块级元素
3.类似于前面学的背景关联方式（让某个背景图片不随滚动而滚动）让某个元素不随着滚动条的滚动而滚动
ie6不支持固定定位
定义：默认情况所以元素的z-index属性是0;
作用是专门用于控制定位流元素的覆盖关系的
默认情况下定位流的元素会盖住标准流的元素
后面编写的定位流会盖住前面编写的定位流元素
在企业开发中：可能不止一次用了定位流，而根据定位流的性质，很有可能后面的元素会盖住前面的元素从而影响整个布局，为了解决这个问题，引入了z-index属性，元素z-index属性大的会覆盖属性小的元素
从父原则：当子元素的父元素有z-index属性时，比较会看父元素的属性而子元素设置的属性就无效了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位流中的z-index属性</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
width: 100px;
height: 100px;
}
.box1{
background-color: yellow;
position: relative;
top: 50px;
left: 50px;
z-index: 3;
}
.box2{
background-color: red;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
.box3{
background-color: green;
position: fixed;
top: 150px;
left: 150px;
z-index: 2;
} </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
定位流之z-index属性的更多相关文章
- Elasticsearch学习之图解Elasticsearch中的_source、_all、store和index属性
转自 : https://blog.csdn.net/napoay/article/details/62233031 1. 概述 Elasticsearch中有几个关键属性容易混淆,很多人搞不清楚_s ...
- 2.33 定位的坑：class属性有空格
2.33 定位的坑:class属性有空格 前言有些class属性中间有空格,如果直接复制过来定位是会报错的InvalidSelectorException: Message:The given sel ...
- 标准I/O库之定位流
有三种方法定位标准I/O流. (1)ftell和fseek函数.这两个函数自V7以来就存在了,但是它们都假定文件的位置可以存放在一个长整型中. (2)ftello和fseeko函数.Single UN ...
- css区块定位之浮动与清除属性
float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...
- CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?
在CSS中关于定位的内容是:position:relative | absolute | static | fixed • static 自动定位,自动定位就是元素在页 面普通文档流中由HTML自动定 ...
- （一）javascript中的数组index属性——获取数组的索引值
例如:要做到这样的效果 点击每个选项时,会显示不同的div. 我们的做法:在javascript中,先把所有的div的display设置为none,然后在根据当前的数组里的索引值进行一个显示div的过 ...
- DOM2定位与高宽类属性专题学习【DOM专题学习系列（一）】
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- 使用jstl的Foreach 和jquery的each()的index属性
最近项目中用到隔行换色问题,使用到了jstl的foreach和jquery的each进行遍历. 首先jstl技术.除了常用的items,var外,还有一个下标属性varStatus,从0开始,使用起来 ...
- Pandas的index属性
我们在统计数据的长度或者个数,不用统计去专门获取数值,而是用index这个数据获取即可,DataFrame的index直接就是最前面的索引号,如果要统计列的个数,使用DataFrame.colums获 ...
随机推荐
- 使用eclipse启动tomcat，正常模式下可以启动tomcat，却在debug模式下无法启动tomcat 问题解决
这个问题可能是由于eclipse和tomcat的交互而产生的,在以debug模式启动tomcat时,发生了读取文件错误,eclipse自动设置了断点,导致tomcat不能正常启动. 解决方法把brea ...
- mysql存储过程的初步学习及案例示例
存储过程 几个月前小编开始初步接触学习存储过程,当然是跟着大神的视频学习的,在学习的过程中自己也记录了一下笔记,如今整理一下,接下来我将从概念,优缺点以及语法和实际应用几方面为大家详细讲解一下存储过程 ...
- [视频]iNeuOS 自主可控工业互联网一体化解决方案 整体介绍
演示地址:http://demo.ineuos.net (注:自己注册) iNeuOS 自主可控工业互联网操作系统,提供全新解决方案 核心组件包括:边缘网关(iNeuLink).设备容器(iNeuK ...
- 适配器（adapter）与fragment之间、fragment与activity之间的通信问题
一.适配器(adapter)与fragment之间通信 通过本地广播进行通信 步骤如下 在adapter中代码 声明本地广播管理 private LocalBroadcastManager local ...
- Spring与Junit测试整合
一.引入spring测试包:text包 二.@RunWith:指定spring对junit提供的一个运行器 @ContextConfiguration: locations指定spring配置文件位 ...
- 【题解】CF1290B Irreducible Anagrams
Link 题目大意:对于一个字符串,每次询问一个区间,看看这个区间是不是可以划分为若干区间,这些区间内数字经过排列后可以还原原来区间. \(\text{Solution:}\) 菜鸡笔者字符串构造该好 ...
- Ubuntu常用工具安装
安装 aptitude 管理软件 $ sudo apt-get install aptitude 安装gdebi(安装deb包) # 安装: $ sudo apt install gdebi-core ...
- SpringCache整合Redis
之前一篇文章 SpringBoot整合Redis 已经介绍了在SpringBoot中使用redisTemplate手动 操作redis数据库的方法了.其实这个时候我们就已经可以拿redis来做项目了, ...
- 用flannel实现跨主机container通信
最近在看kubernetes,看到了网络部分,这部分是集群设计的难点,也是我比较感兴趣的部分.书上提到不同node的container之间通信主要使用flannel,openvswitch等技术,这些 ...
- 多测师讲解接口测试 _postman（上）_高级讲师肖sir
Postman 一.Postman介绍 Postman是一个网页调试工具,也可以调试css.html Postman的操作环境 环境:Postman Mac.Windows X32.Windows X ...