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

【问题标题】：How to overlap two absolutely positioned elements?如何重叠两个绝对定位的元素？
【发布时间】：2015-05-07 18:21:35
【问题描述】：

HTML

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

CSS

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;
    }

这里是jsfiddle.

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

【问题讨论】：

看这个：jsfiddle.net/mirohristov/y9d25gxq/5

标签： html css

【解决方案1】：

将您的代码更改为以下内容

HTML

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

CSS

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;
}

编辑：这是你想要的吗？ https://jsfiddle.net/y9d25gxq/9/

【讨论】：

【解决方案2】：

我没有让 span 文本具有绝对位置，而是让 line 具有绝对位置，并使用 text-align 将文本置于中心位置：中心。

 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;

    }

【讨论】：