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>
        <p>任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。</p>
        <p>当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。</p>
        <p>重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。</p>
        <p>最常见的是网站顶部的菜单，它应该是常显示在最上层。</p>
        <p>任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。</p>
        <p>当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。</p>
        <p>重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。</p>
        <p>最常见的是网站顶部的菜单，它应该是常显示在最上层。</p>
        <p>任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。</p>
        <p>当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。</p>
        <p>重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。</p>
        <p>最常见的是网站顶部的菜单，它应该是常显示在最上层。</p>
        <p>任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。</p>
        <p>当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。</p>
        <p>重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。</p>
        <p>最常见的是网站顶部的菜单，它应该是常显示在最上层。</p>       
    </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>
        <p>任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。</p>
        <p>当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。</p>
        <p>重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。</p>
        <p>最常见的是网站顶部的菜单，它应该是常显示在最上层。</p>
        <p>任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。</p>
        <p>当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。</p>
        <p>重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。</p>
        <p>最常见的是网站顶部的菜单，它应该是常显示在最上层。</p>
        <p>任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。</p>
        <p>当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。</p>
        <p>重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。</p>
        <p>最常见的是网站顶部的菜单，它应该是常显示在最上层。</p>
        <p>任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。</p>
        <p>当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。</p>
        <p>重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。</p>
        <p>最常见的是网站顶部的菜单，它应该是常显示在最上层。</p>       
    </body>
</html>
 

解决之后运行效果

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lsyw/p/10839031.html