html中div叠加时怎么显示子图层

html-css011

html中div叠加时怎么显示子图层,第1张

使用CSS的z-index，将子节点（也就是你理解的子图层）设置的大些，将上级节点设置的小些，就可以的。

示例(由于回答时，编辑器插入代码不可用，所以下面的代码没有格式化)：

<!DOCTYPE html>

<html lang="zh_CN">

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

  <meta http-equiv="X-UA-Compatible" content="IE=9" />

  <meta charset="UTF-8" />

  <title>Document</title>

  <style>

      .layer1

      {

          border:1px solid green

          z-index:2

      }

      .layer2

      {

          border:1px solid red

           z-index:1

      }

  </style>

</head>

<body>

  <div class="layer1">

      <p>layer1的内容</p>

      <div class="layer2">layer2的内容</div>

  </div>

</body>

</html>

示例截图：

<div style="width:100%text-align:centerposition:relativemargin:0 auto">

<div style="width:100pxposition:absoluteleft:50%">我是第一个层</div>

<div style="width:100pxposition:absoluteleft:50%">重叠的第二个层</div>

</div>

以上代码实现两个层重叠，且居中！在firefox，ie8中测试通过~