why is `position:relative` functioning like `z-index`? - html

Question

Hey guys I am relatively very new to HTML and CSS and have the following difficulty I made a small input box and I am trying to add a few CSS transforms and create a small animation on the input box. Code below:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.input {
position: relative;
display: inline-block;
max-width: 350px;
width: 100%;
}
.akira-input {
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
width: 100%;
background: transparent;
z-index: 10;
}
.akira-label {
display: block;
height: 100%;
padding: 0;
width: 100%;
background: #696a6e;
color: #cc6055;
cursor: text;
}
.akira-label:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: red;
-webkit-transform: scale3d(0.97, 0.50, 1);
transform: scale3d(0.97, 0.50, 1);
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.label-content {
color: #000;
font-size: 1.3em;
text-transform: uppercase;
position: relative;
display: block;
text-align: center;
padding: 1.6em 0;
width: 100%;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
<span class="input">
<input type="text" id="akira" class="akira-input">
<label for="akira" class="akira-label">
<span class="label-content">Akira</span>
</label>
</span>
My difficulty is, if I apply position:relative to <span class="label-content">Akira</span>, it shows, if I remove position:relative , that element disappears from view.
My question is why is position:relative functioning like z-index?
Can somebody elaborate ??
EDIT :: refering to Justinas answer , i have the folloing question ,
Does applying position:relative places an element
higher in the stack , even without applying z-index ??

Answer 1

z-index is only working for non-static elements, so when you remove position: relative than element becomes statically positioned and moves below higher index elements (disappears from view). When you add position: relative to element, than z-index will take effect and so element appears in your view.
Also position and z-index is two different properties
position - how element is positioned according to other elements on page. Default to static
z-index - how high element is in z-axis (z-index: 2 - is behind element with z-index: 10). Default to 5
.wrapper {
position: relative;
}
#static {
position: static;
z-index: 999;
width: 400px;
height: 150px;
background-color: #ddd;
padding: 3px;
}
#top-1 {
position: absolute;
z-index: 10;
left: 8px;
top: 45px;
width: 330px;
height: 80px;
background-color: #888;
padding: 3px;
}
#relative {
position: relative;
z-index: 11;
background-color: #88a;
width: 330px;
height: 80px;
padding: 3px;
top: 30px;
left: 8px;
}
#top-2 {
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 400px;
height: 150px;
background-color: #dda;
padding: 3px;
}
<div class='wrapper'>
<div id="static">
I'm static, so behind #top-1, but have z-index higher than #top-1... Means z-index has no effect.
<br/>Text that is not visible, because behind #top-1 element
</div>
<div id='top-1'>
I'm above #static, because i have non-static position, so my z-index has effect.
</div>
</div>
<hr/>
<div class='wrapper'>
<div id="relative">
I'm relative and above #top-2, because my z-index higher than #top-2... Means z-index has taken effect.
</div>
<div id='top-2'>
I'm below #relative, because i have lover z-index.
<br/>Text that is not visible, because behind #top-1 element
</div>
</div>

Answer 2

z-index only works on positioned elements so position:absolute, position:relative or position:fixed

Answer 3

It does not behave like a z-index, because z-index specifies an ordering rule, but not the way how the element is displayed.
position: relative; says to go to the relative mode where it can compete the absolutely positioned elements.
Your problem here is that :before pseudo-element is a hierarchical sibling of span, and it takes the whole available parent width. So it fully covers a static span element.
When you make it relative, it becomes shown because when z-index is not specified for both non-static elements they are shown in the same order like they are placed in HTML (so element which is defined in HTML later is always on top).
Your structure is:
label
:before
span
so the span becomes visible.