html - 如何在绝对位置的顶部显示 float (z-index 不起作用)

Question

我有一个 div，它有两个 child 。一个 child 是 stone-group-handle 使用 float:left 另一个是 stone-wrap 使用 position:relative 和 position:absolute 在 0, 0 上显示它的 child 。

我需要 stone-group-handle 显示在左上角前面和 stone-wrap 显示在左上角 stone-group-handle.

如何让 stone-group-handle 显示在顶部？

http://codepen.io/eguneys/pen/XbxRJE

body {
  padding: 50px;
  font-family: 'Helvetica';
  background-color: rgb(180, 180, 180);
}
.stone-group-handle {
  float: left;
  padding: 0.5em 1em 1em;
  color: inherit;
  text-decoration: none;
  font-size: 0.7em;
  user-select: none;
  cursor: pointer;
  background-color: rgb(211, 211, 211);
  border-radius: 3px;
  border-top: 1px solid rgb(211, 211, 211);
  box-shadow: 3px 1px 5px rgba(0, 0, 0, .1);
  transition: all 0.2s linear;
}
.stone-group-handle:hover {
  background-color: rgb(200, 200, 200);
}
.stone-group {
  top: 50px;
  left: 50px;
  display: inline-block;
  position: relative;
}
.stones-wrap {
  height: 50px;
  width: 123px;
  border: 2px solid rgb(211, 211, 211);
  border-radius: 2px;
  box-shadow: 3px 1px 5px rgba(0, 0, 0, .2);
}
.stone {
  position: absolute;
  height: 50px;
  width: 40px;
  background: black;
}
.stone2 {
  left: 43px;
}
.stone3 {
  left: 84px;
}

<div class="stone-group">
  <div class="stone-group-handle">
    30
  </div>
  <div class="stones-wrap">
    <div class="stone">
    </div>
    <div class="stone stone2">
    </div>
    <div class="stone stone3">
    </div>
  </div>
</div>

Answer 1

确保在 .stone-group-handle 和 z-index: 1; 上设置了 position: relative;。默认情况下，position 设置为 static 并且 z-index 对 static 元素没有任何影响。

'z-index'

Applies to: positioned elements

( http://www.w3.org/TR/CSS21/visuren.html#z-index )

body {
  padding: 50px;
  font-family: 'Helvetica';
  background-color: rgb(180, 180, 180);
}
.stone-group-handle {
  position: relative;
  z-index: 1;
  float: left;
  padding: 0.5em 1em 1em;
  color: inherit;
  text-decoration: none;
  font-size: 0.7em;
  user-select: none;
  cursor: pointer;
  background-color: rgb(211, 211, 211);
  border-radius: 3px;
  border-top: 1px solid rgb(211, 211, 211);
  box-shadow: 3px 1px 5px rgba(0, 0, 0, .1);
  transition: all 0.2s linear;
}
.stone-group-handle:hover {
  background-color: rgb(200, 200, 200);
}
.stone-group {
  top: 50px;
  left: 50px;
  display: inline-block;
  position: relative;
}
.stones-wrap {
  height: 50px;
  width: 123px;
  border: 2px solid rgb(211, 211, 211);
  border-radius: 2px;
  box-shadow: 3px 1px 5px rgba(0, 0, 0, .2);
}
.stone {
  position: absolute;
  height: 50px;
  width: 40px;
  background: black;
}
.stone2 {
  left: 43px;
}
.stone3 {
  left: 84px;
}

<div class="stone-group">
  <div class="stone-group-handle">
    30
  </div>
  <div class="stones-wrap">
    <div class="stone">
    </div>
    <div class="stone stone2">
    </div>
    <div class="stone stone3">
    </div>
  </div>
</div>