我弄亂了顯示和位置樣式屬性,但無論我嘗試什么,我的元素都卡在垂直軸上。我從按鈕生成器網站復制了 CSS 代碼,一切正常,我什至在 javascript 中添加了一個函式,但我完全堅持定位它。我只有幾周的時間自學編碼,目前 javascript 是我的強項,但顯然,CSS 和 HTML 也能派上用場。任何幫助表示贊賞。
#startButton {
box-shadow: 0px 0px 12px 2px #3dc21b;
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:18px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
position: relative;
top: 50%;
left: calc(50% - 30px);
}
.startButton:hover {
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
.startButton:active {
position:relative;
top:1px;
}
如果有意義的話,我在 HTML 中有自己的元素,它不在它自己的 div 或 head 或 body 中。我不確定這是否會有所作為。謝謝!
編輯:我已經弄清楚元素不只是像我想的那樣重疊。我了解到我的問題是按鈕元素的“空間”卡在畫布下方。我現在需要一種方法來重疊這些元素。
uj5u.com熱心網友回復:
原因是父元素(在您的情況下為主體)沒有靜態高度。
因此,您可以添加一個具有靜態高度的父元素并包裝您的#startButton.
編輯您的 html:
<div class="parent">
<button id="startButton"> #Startbutton </button>
</div>
向父元素添加靜態高度(例如300px):
.parent {
height: 300px;
}
小提琴:https ://jsfiddle.net/kongallis/chqn18us/6/
另請參閱:https ://stackoverflow.com/questions/9765402/why-is-is-top50-in-css-not-working#:~:text=To answer your question why,a unit other than %。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/425239.html
上一篇:PythonKivyMD。如何通過點擊同一個按鈕依次運行兩個功能?
下一篇:使用其內容定位按鈕
