How to overlap two absolutely positioned elements? - html

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;
}
Here is the jsfiddle.
Can anyone please tell me how to position 'X' in center such that the vertical line and X will overlap each other?

Answer 1

Instead of making span text to have absolute position, I have given line to have absolute position, and have placed text in center using 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

Change your code to the following
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;
}
Edit : Is this what you want ? https://jsfiddle.net/y9d25gxq/9/