無法使div響應和覆蓋

我無法在網頁中響應div按鈕。我已將所有像素值更改爲百分比，問題仍然存在。無法使div響應和覆蓋

.wrapper { 
 
    display: block; 
 
    position: absolute; 
 
    left: 30%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.testing { 
 
    padding: 10% 10%; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    background-color: #009ac9; 
 
    border: 2px solid transparent; 
 
    font-size: 90%; 
 
    display: inline-block; 
 
    border-radius: 0.1em; 
 
    transition: all 0.2s ease-in-out; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.testing:hover { 
 
    background-color: #ffffff; 
 
    color: #009ac9; 
 
    border-color: #009ac9; 
 
}

<div class="wrapper"> 
 
    <a href="#" class="testing">LOG IN</a> 
 
</div>

的另一個問題是，我有一個全屏覆蓋菜單，我想禁用此按鈕時覆蓋存在。截至目前，當疊加層出現時，該按鈕仍然可點擊。我想禁用它： Image

來源

2017-08-23 Inception

現狀我不明白嗎？你想要什麼。？？你想'.wrapper'是100％的寬度。和關於第二個** Q ** - 請提供更多包含菜單和此按鈕的代碼。 – weBBer

我希望按鈕具有響應性，以便隨頁面縮小，並在移動設備上查看。截至目前，由於某種原因，尺寸並未減小。至於覆蓋，按鈕代碼是我上面提到的相同。而我使用的覆蓋是這樣的：[鏈接]（https://tympanus.net/Development/FullscreenOverlayStyles/） – Inception

也許你正在尋找單位'vw'。將你的'font-size'改爲'3vw'，看看如果你調整頁面大小會發生什麼。 – Huelfe

試試這個，我認爲這會有所幫助。

.wrapper { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right:0; 
 
    bottom:0; 
 
    z-index:9; 
 
} 
 

 
.testing { 
 
    padding: 10% 10%; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    background-color: #009ac9; 
 
    border: 2px solid transparent; 
 
    font-size: 15px; 
 
    display: inline-block; 
 
    border-radius: 0.1em; 
 
    transition: all 0.2s ease-in-out; 
 
    position: relative; 
 
    overflow: hidden; 
 
    position:relative; 
 
    left:50%; 
 
    top:50%; 
 
    width:20%; 
 
    min-width:50px; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.testing:hover { 
 
    background-color: #ffffff; 
 
    color: #009ac9; 
 
    border-color: #009ac9; 
 
}

<div class="wrapper"> 
 
    <a href="#" class="testing">LOG IN</a> 
 
</div>

而對於菜單給z-index:999;到.overlay在全屏覆蓋菜單style.I認爲它會爲你工作。

來源

2017-08-23 06:38:55 weBBer

謝謝！ vw屬性修復了響應性問題，z-index修復了覆蓋問題。！ – Inception

@Inception'vw'是一個複雜的屬性，它總是使用'min width'作爲固定寬度。你檢查了我的代碼嗎？在那裏，我沒有使用'vw'。覈實。 – weBBer

嘗試使用vh代替百分比，希望它能夠工作並在響應式屏幕中使用媒體查詢。

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery

來源

2017-08-23 06:44:58

無法使div響應和覆蓋

回答

相關問題