I'm struggling to get the <i> element to display below the anchor in the stacking order. Any suggestions on how to achieve this?
a.button {
background-color: gray;
border-radius: 5px;
color: rgb(247, 247, 247);
display: inline-block;
font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 800;
height: 26px;
line-height: 26px;
padding: 0 12px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
}
a.button i {
background: rgb(128, 0, 128);
border-radius: 5px;
border-top-right-radius: 2.5px;
height: 20px;
left: 80%;
position: absolute;
top: 50%;
width: 20px;
z-index: -1;
}<a class="button" href="#"><i></i>Button</a>When I remove z-index: 1 from the <a> tag, the <i> element ends up positioned beneath parent elements:
div.wrapper {
background: pink;
padding: 20px;
}
a.button {
background-color: gray;
border-radius: 5px;
color: rgb(247, 247, 247);
display: inline-block;
font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 800;
height: 26px;
line-height: 26px;
padding: 0 12px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
a.button i {
background: rgb(128, 0, 128);
border-radius: 5px;
border-top-right-radius: 2.5px;
height: 20px;
left: 80%;
position: absolute;
top: 50%;
width: 20px;
z-index: -1;
}<div class="wrapper">
<a class="button" href="#"><i></i>Button</a>
</div>