Font awesome icons element space have unwanted overlap - html

Question

I am using font awesome icons and I want them position on top of each other. I also want to the user to be able to interact with them by clicking on them.
The problem is that the element of each icon is taking up more space than it needs and is overlapping. So when the user thinks they are clicking on the top one, they end up activating a listener for the bottom one.
Here is the html:
<div class="arrow-container">
<i class="fa fa-sort-asc comment-vote up-vote-comment" aria-hidden="true"></i>
<i class="fa fa-sort-desc comment-vote down-vote-comment" aria-hidden="true"></i>
</div>
and the css:
.black-arrow{
color: black;
}
.up-vote-comment{
width: 100%;
}
.down-vote-comment{
position: relative;
top: -15px;
}
.comment-vote{
font-size: 20px;
}
it is important for me that the two arrows line up exactly on the same line horizontally and be quite close vertically, as they are in this fiddle.
Anyone know how to make them not overlap in occupied element space? I tried setting the height of the bottom arrow but that just made the occupied space of the element be above the arrow itself.

Answer 1

You can use the following code:
EDIT
.comment-vote {
font-size: 20px;
position: initial;
width: 100%;
display: inline-block;
}
.arrow-container {
width: 30px;
position: absolute;
top: 0px;
left: 0px;
}
This way you can use the .arrow-container class to position the arrows.

Answer 2

Combination of containers and absolute positioning. You can even have a 2px space between arrows.
.comment-icon-wrapper {
height: 10px;
width: 12px;
overflow: hidden;
position: relative;
margin-bottom: 2px;
}
.comment-vote {
position: absolute;
display: block;
}
.comment-vote {
font-size: 20px;
line-height: 20px;
display: block;
background-color: red;
}
.comment-vote:hover {
cursor:pointer;
}
.down-vote-comment {
position: relative;
top: -9px;
background-color: blue;
}
https://jsfiddle.net/w6ybL3nb/5/ (backgrounds to highlight spaces)

Answer 3

If you add a height to the top arrow and some z-indexes so the top arrow stacks over the bottom arrow, you can achieve what you want:
.black-arrow {
color: black;
}
.up-vote-comment {
width: 100%;
height: 12px;
z-index: 2;
overflow: hidden;
}
.down-vote-comment {
top: -13px;
z-index: 1;
}
.comment-vote {
font-size: 20px;
display: inline-block;
position: relative;
}
Updated fiddle - I have added console logging to the click of the arrows so you can see which one is being pressed