Question

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相互重叠？

Answer 1

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

 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;

    }

Answer 2

将您的代码更改为以下

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 个答案: