将按钮定位在画布顶部

Question

我试图在画布上放置一个字体很棒的按钮。我目前的加价：

<li id="container">
    <i class="fa fa-plus"></i>
    <canvas></canvas>
</li>

默认情况下，容器和画布是可见的。当用户将鼠标悬停在容器上时，也会出现该按钮。但是，它会向下推动画布，导致它从容器中溢出：

容器有position: absolute而我无法控制（它是我使用的插件的一部分）。我完全可以控制画布和按钮的样式。

使这个棘手的是用户可以调整容器的大小，并且按钮必须始终保持在它的顶部中心。目前工作正常，但我无法将其显示在画布上。

Answer 1

悬停以查看i。

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: #F72F4E;
}

#container {
  position: absolute;
  width: 50vmin;
  height: 50vmin;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.2);
}
#container:hover i {
  opacity: 1;
  transition: opacity .2s ease-out;
}
#container i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  opacity: 0;
  transition: opacity .2s ease-in;
}
#container canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5px solid green;
}

<li id="container">
    <i class="fa fa-plus">i</i>
    <canvas></canvas>
</li>

Answer 2

您是否尝试过使用z-index？ 如果你不知道它是什么，你可以在这里阅读：http://www.w3schools.com/cssref/pr_pos_z-index.asp

基本上，您将按钮位于所有其他元素的顶部。 希望这能提供一些指导。

另外！想到这一点，试着搞乱位置属性。 http://www.w3schools.com/cssref/pr_class_position.asp

＆＃39;固定＆＃39; value将相对于DOM窗口定位您的按钮，这意味着其他元素不应对其位置产生影响。

Answer 3

通过将font-awesome元素更改为div并将其高度设置为0来解决它。它的z-index已经大于画布的大小。