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

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

我需要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>

最佳答案

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


  'z-index'
  
  适用于：定位元素


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