Question

嘿伙计们我对HTML和CSS相对比较陌生并且遇到以下困难我做了一个小输入框，我试图添加一些CSS变换并在输入框上创建一个小动画。代码如下：

＆＃13;

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

＆＃13;

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

＆＃13;

我的难点是，如果我将position:relative应用于<span class="label-content">Akira</span>，则会显示，如果我删除position:relative，该元素会从视图中消失。

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

有人可以详细说明吗？

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

应用position：relative放置一个元素堆栈中更高，即使没有应用z-index ??

Answer 1

z-index仅适用于非静态元素，因此当您移除position: relative时，元素将变为静态定位并移动到较高索引元素下方（从视图中消失）。当您向元素添加position: relative时，z-index将生效，因此您的视图中会显示元素。

同样position和z-index是两个不同的属性
position - 如何根据页面上的其他元素定位元素。 默认为静态
z-index - 高元素在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>

Answer 2

z-index仅适用于定位元素，因此position：absolute，position：relative或position：fixed

Answer 3

它的行为与z-index不同，因为z-index指定了排序规则，但不指示元素的显示方式。

position: relative;表示要进入相对模式，它可以与绝对定位的元素竞争。

这里的问题是:before伪元素是span的分层兄弟，它占用了整个可用的父宽度。因此它完全覆盖了静态span元素。

当你使它相对时，会显示它，因为当没有为两个非静态元素指定z-index时，它们以与放置在HTML中相同的顺序显示（所以后来在HTML中定义的元素）总是排在最前面。

您的结构是：

标签

：前
跨度

因此跨度变得可见。

为什么`position：relative`的功能类似于`z-index`？

3 个答案: