Html 如何重叠两个绝对定位的元素？

HTML

这是你的电话号码

---

有人能告诉我如何将“X”定位在中心，使垂直线和X相互重叠吗？

我没有将跨距文本设置为绝对位置，而是将直线设置为绝对位置，并使用“文本对齐：中心”将文本放置在中心

div.btn{
        width:100px;
        height:100px;
        float:left;
        border:1px solid #000000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:80px;
        text-align:center;
        position: relative;
    }
   div.vertical_line{
        width:0;
        height:100px;
        border:1px solid #000000;
        position:absolute;
        right:50px;
        z-index:100;
        margin:0;
        padding:0;
    }
    div.btn span{
        position:absolute;
        z-index:0;
    }

---

将代码更改为以下内容

HTML

编辑：这是你想要的吗

见此：

div.btn{
        width:100px;
        height:100px;
        float:left;
        border:1px solid #000000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:80px;
        text-align:center;
        position: relative;
    }
   div.vertical_line{
        width:0;
        height:100px;
        border:1px solid #000000;
        position:absolute;
        right:50px;
        z-index:100;
        margin:0;
        padding:0;
    }
    div.btn span{
        position:absolute;
        z-index:0;
    }

 div.btn{
        width:100px;
        height:100px;
        float:left;
        border:1px solid #000000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:80px;
        text-align:center;
        position: relative;
    }
   div.vertical_line{
        width:0;
        height:100px;
        border:1px solid #000000;
        position:absolute;
        right:49px;
        z-index:100;
        margin:0;
        padding:0;
        top : 0;
    }
    div.btn span{
        float:left;
        width : 100%;
        text-align : center;
        z-index:0;

    }

<div class="btn" >
    <div class="vertical_line"></div>
    <span>X</span>
</div>

div.btn{
    width:100px;
    height:100px;
    float:left;
    border:1px solid #000000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:80px;
    text-align:center;
    position: relative;
  }
div.vertical_line{
    width:0;
    height:100px;
    border:1px solid #000000;
    position:absolute;
    right:50px;
    z-index:100;
    margin:0;
    padding:0;
}
div.btn span{
    position:relative;
    z-index:0;
}