z-index无效注意事项

1.z-index只能作用在position为absolute,relative,fixed的非static元素上

2.z-index只能在同等级元素上作用，无法在父元素和子元素上起作用（父元素和别的父元素的子元素这样是无效的）。

3.看2的下面例子：自己去运行一下就可以理解了。反正记住用z-index要在同一个级别的元素用。把下面的红色部分分别删和不删比较下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{margin:0;
padding:0;
border:none;
}
</style>
</head>
<body><div style='width:100%;height:1000px;'><div id='父1' style='width:200px;height:100px;position:relative;background:green;top:0px;z-index:3;'><div id='子1' style='width:100px;height:100px;position:absolute;top:100px;left:30px;background:white;border:1px solid blue;'>子1</div></div><div id='父2' style='width:200px;height:100px;position:absolute;background:red;left:30px;top:50px;z-index:2;'>红色</div><div style='width:200px;height:100px;position:absolute;background:yellow;left:60px;top:120px;z-index:1;'>黄色</div></div>
</body>
</html>

转载于:https://www.cnblogs.com/horsen/p/6908016.html

z-index无效注意事项相关推荐

明明表中有这个索引，但mysql的force index 无效？
一.前言最近在写sql的时候,会格外注意一些sql的优化,针对复杂的sql,优化器使用的方案并不是最佳方案,所以可能需要我们使用force index这种方式来自己选择索引,加快查询速度.这次记录一 ...
eclips git中的add to Index无效解决
今天在使用eclips git中的add to Index,发现其无效,具体如下问题描述: 通过export导入一个git java项目在java工程中新增一个类文件IndicatorCalcTe ...
HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
js怎么设置z index.html,HTML5 Canvas set z-index
j0kEli Stone提出了一个问题:HTML5 Canvas set z-index,或许与您遇到的问题类似. 回答者markE给出了该问题的处理方式: Yes..kind of yes. You ...
html设置z index.html,CSS中z-index属性的使用方法和示例介绍
怎么使用CSS z-index属性?下面本篇文章就来给大家浅谈一下CSS z-index属性的使用方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. z-index属性介绍只有设置 ...
mysql 索引合并_MySQL 索引合并（Index Merge）优化
本文问题什么是Index Merge?Index Merge的限制有哪些? 如何查看语句是否使用了Index Merger? Index Merge有哪几种?分别适用于那些情景? 如何控制优化器是否 ...
css索引_CSS中的Z索引：它是什么以及它做什么
css索引什么是Z索引? (What is a Z Index?) Z Index (z-index) is a CSS property that defines the order of ove ...
mvc iis设置默认首页无效
配置网站默认页index无效,在网上找了好久没有一个可以解决的方法,后来发现一个很低端的错误 .... MVC的路由机制忘记弄了,可能因为mvc的路由导致iis默认首页加载不到所以mvc的iis默认 ...
react+react-beautiful-dnd实例代办事项
react+react-beautiful-dnd应用效果预览实现思路 index.js入口文件配置 import React from 'react' import ReactDOM from ...

z-index无效注意事项

z-index无效注意事项相关推荐

最新文章

热门文章