这是一个关于HTML的代码问题

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        * {
            margin:10px;
        }
       #bigImg{
   height:700px;
   background:url(../img/bigLogo.jpg) no-repeat -240px 0px;
   position:relative;
   z-index:-1;
}
#Design2 {
    background: url(../img/text.png) no-repeat;
    width: 392px;
    height: 550px;
     top:9%;
   left:15%;
   position:absolute;
}
#Design3{
   background:url(../img/text2.png) no-repeat;
   width:102px;
   height:204px;
   top:30%;
   left:50%;
   position:absolute;
}
#Design4{
   background:url(../img/line.jpg) no-repeat;
   width:1px;
   height:180px;
   top:32%;
   left:40%;
   position:absolute;
}
  </style>
</head>
<body>


    <div id="bigImg">
        <div id="Design2">
               <span>  1</span>
               <span>2</span>

        </div>
        <div id="Design4"></div>
    </div>





</body>

</html>

line 图片说明

text

![图片说明](https://img-ask.csdn.net/upload/201907/04

/1562250534_836074.png)

text2
图片说明

biglogo
图片说明

span中的内容为啥不能显示

已经说了很多次了，拜托拜托，请你用电脑来提问

请你提问以后再看下你发出的问题，检查下图片、代码是否完整，如果不完整，可以修改。

一定要把问题贴正确，否则无法回答。

因为dom的层级结构导致元素很容易被覆盖，你可以把背景图片去掉看看那个内容会不会显示