html - 为什么 `position:relative` 像 `z-index` 一样工作？

Question

大家好，我是 HTML 和 CSS 的新手，遇到以下困难我制作了一个小输入框，我正在尝试添加一些 CSS 转换并在输入框上创建一个小动画。代码如下:

* {
  -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>

我的困难是，如果我申请 position:relative至 <span class="label-content">Akira</span> ，它显示，如果我删除 position:relative , 该元素从 View 中消失。

我的问题是为什么 position:relative功能类似于z-index ？

有人可以详细说明吗？？

编辑::引用 Justinas 的回答，我有以下问题，

Does applying position:relative places an element higher in the stack , even without applying z-index ??

Answer 1

z-index 仅适用于非静态元素，因此当您删除 position: relative 时，元素将变为静态定位并移动到更高索引元素下方(从视野中消失)。当您将 position: relative 添加到元素时，z-index 将生效，因此元素会出现在您的 View 中。

position 和z-index 也是两个不同的属性
position - 元素如何根据页面上的其他元素定位。 默认为静态
z-index - high 元素在 z 轴上的位置(z-index: 2 - 在 z-index 元素后面: 10)。 默认为 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>