CSS 重叠元素 - 走看看

zoukankan html css js c++ java

CSS 重叠元素

任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。

当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。

重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。

最常见的是网站顶部的菜单，它应该是常显示在最上层。

如果它出现在最前面，它显示就是这个样子。

后面的文本元素挡住了顶部菜单元素。

代码如下：

<!DOCTYPE html>

<html>

 <head>

 <title>重叠产生的问题</title>

 <meta charset="UTF-8">

 <style type="text/css">

 body {

 750px;

 color: #665544;}

 h1 {

 position: fixed;

 top: 0px;

 left: 0px;

 margin: 0px;

 padding: 10px;

 100%;

 }

 p {

 position: relative;

 top: 70px;

 left: 70px;}

 </style>

 </head>

 <body>

 <h1>软件开发，成就梦想</h1>

 <h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2>

 任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。

 当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。

 重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。

 最常见的是网站顶部的菜单，它应该是常显示在最上层。

 任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。

 当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。

 重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。

 最常见的是网站顶部的菜单，它应该是常显示在最上层。

 任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。

 当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。

 重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。

 最常见的是网站顶部的菜单，它应该是常显示在最上层。

 任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。

 当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。

 重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。

 最常见的是网站顶部的菜单，它应该是常显示在最上层。

 </body>

</html>

要解决这样问题，只要将顶部菜单的z-index值设置大点，多大呢？

比所有有元素的z-index值大就行，目前常见是将顶部菜单值设置为9999。足够大了，一个页面有9998个元素很少。

添加关键代码 z-index:9999

<!DOCTYPE html>

<html>

 <head>

 <title>重叠产生的问题</title>

 <meta charset="UTF-8">

 <style type="text/css">

 body {

 750px;

 color: #665544;}

 h1 {

 position: fixed;

 top: 0px;

 left: 0px;

 margin: 0px;

 padding: 10px;

 100%;



 z-index:9999}

 p {

 position: relative;

 top: 70px;

 left: 70px;}

 </style>

 </head>

 <body>

 <h1>软件开发，成就梦想</h1>

 <h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2>

 任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。

 当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。

 重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。

 最常见的是网站顶部的菜单，它应该是常显示在最上层。

 任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。

 当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。

 重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。

 最常见的是网站顶部的菜单，它应该是常显示在最上层。

 任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。

 当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。

 重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。

 最常见的是网站顶部的菜单，它应该是常显示在最上层。

 任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。

 当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。

 重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。

 最常见的是网站顶部的菜单，它应该是常显示在最上层。

 </body>

</html>

解决之后运行效果

查看全文

相关阅读:
iBatis查询时报“列名无效”无列名的错误原因及解决方法
 【转】Spring结合Quartz实现多任务定时调用
 关于jar中读取包内和包外文件
 【摘自百度文库】数据库水平切分的实现原理解析
 web.xml 中的listener、 filter、servlet 加载顺序及其详解（转载）
EL表达式
 【转】使用XFire+Spring构建Web Service
慎用href="javascript:void(0)"
POI导出EXCEL【摘自：oschina.net】
【转】IBM websphere6.1 不支持泛型、intInteger类型的自动装箱和拆箱问题

原文地址：https://www.cnblogs.com/lsyw/p/10839031.html