定位流之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获 ...
随机推荐
- hystrix 源码分析以及属性的配置
一.feign与hystix结合 1.1测试环境搭建 架构如图: 非常简单,就是Order服务通过feign调用product服务的一个获取商品信息的一个接口: package com.yang.xi ...
- Centos-实时监控系统处理器状态-top
top 实时监控处理器状态的实时监控,能够显示系统中各个进程的资源占用状况 相关选项 -d 指定每两次屏幕信息刷新之间间隔秒数 -i 不显示闲置或者僵死进程信息 -c 显示进程整个命令路径 -s 安 ...
- TIMESTAMP with implicit DEFAULT value is deprecated
出错版本 mysql 5.7 why? (警告)不包含隐式默认值的时间戳 way? 在 /etc/my.conf中 mysqld 模块中添加 explicit_defaults_for_timesta ...
- 031 01 Android 零基础入门 01 Java基础语法 03 Java运算符 11 运算符的优先级
031 01 Android 零基础入门 01 Java基础语法 03 Java运算符 11 运算符的优先级 本文知识点:Java中运算符的优先级 运算符的优先级问题 前面学习了很多的运算符,如果这些 ...
- Spring Boot+Spring Security+JWT 实现 RESTful Api 认证（一）
标题 Spring Boot+Spring Security+JWT 实现 RESTful Api 认证(一) 技术 Spring Boot 2.Spring Security 5.JWT 运行环境 ...
- windows上启动docker容器报错：standard_init_linux.go:211: exec user process caused “no such file or directory” - Docker
解决方案: standard_init_linux.go:190: exec user process caused "no such file or directory" - D ...
- 获取Jetbrain全家桶激活码
支持正版,本KEY仅用于体验软件 激活码 激活码一: 2GCA2ZHNKP-eyJsaWNlbnNlSWQiOiIyR0NBMlpITktQIiwibGljZW5zZWVOYW1lIjoi5r+A5r ...
- shell-变量的数值运算-bc-typeset-中括号等方法介绍
1. bc命令的用法: bc是unix下的计算器,它也可以用在命令行下面: 例:给自变量i加1 i=2 i=`echo $i + 1|bc` --------效率低 因为bc支持科学计算 ...
- 如果你想or即将成为一名程序员，那你需要知道这些东西！上岗须知~
前两天公司学院的同学给我看了一下即将入职的应届生的数量,真是不少.感慨一下,一批新人即将到来,而自己又老去了一岁.码农是一个必将终身学习的职业.而相关的知识越来越多了.接下来该学什么?接下来该干什么? ...
- rpm|yum安装的查看安装路径
[root@localhost src]# rpm -qa|grep grafanagrafana-7.1.0-1.x86_64[root@localhost src]# rpm -ql grafan ...