在画布上放置一个按钮

我试图在画布上放置一个字体真棒按钮。我目前的标记：在画布上放置一个按钮

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

容器和画布默认是可见的。当用户鼠标移动容器时，该按钮也会出现。然而，它推动画布向下，使其溢出容器：

容器具有position: absolute，我没有对任何控制（插件它的一部分我使用）。我完全可以控制画布和按钮的样式。

什么让这个棘手的是，用户可以调整容器的大小，并且按钮必须始终保持在它的顶部中心。目前，这工作正常，但我不能让它也出现在画布的顶部。

来源

2015-12-06 Ege Ersoz

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

本质上，你将有按钮位于所有其他元素之上。希望这给出一些指导。

另外！想到这个，试着弄清位置属性。 http://www.w3schools.com/cssref/pr_class_position.asp

“固定”值将相对于DOM窗口定位按钮，这意味着其他元素不应该对其位置产生影响。

来源

2015-12-06 02:46:19

谢谢，已经知道的z-index，但这不是问题。 –

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

来源

2015-12-06 03:19:21

悬停以查看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>

来源

2015-12-06 03:34:37 0x860111

在画布上放置一个按钮

回答

相关问题