在畫布上放置一個按鈕

我試圖在畫布上放置一個字體真棒按鈕。我目前的標記：在畫布上放置一個按鈕

<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

在畫布上放置一個按鈕

回答

相關問題