CSS：頁腳出現在瀏覽器尺寸縮小的主要內容上

我創建了一個前端計算器，並在頁面底部添加了「啓動說明」按鈕。該按鈕在點擊時展開爲模式，顯示操作計算器的指示。CSS：頁腳出現在瀏覽器尺寸縮小的主要內容上

這裏的頁腳HTML的一部分

<div id="instructions"> 
    <!-- Button trigger modal --> 
    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal"> 
     Launch Instructions 
    </button>

我fixed靠近屏幕底部的頁腳的position，但我並沒有理解它會留在同一個地方，即使瀏覽器縮小，從而導致頁腳出現在計算器本身上。

這裏的頁腳CSS -

#instructions { 
    position: fixed; 
    left: 44%; 
    bottom: 0px; 
    z-index: 1049; 
    font-family: 'Courgette', cursive; 
} 

#instructions button { 

    text-transform: uppercase; 
    opacity: 0.6; 
}

而且這裏的一對Codepen完整的應用程序。

即使屏幕縮小，我不確定如何使頁腳和「啓動指令」按鈕保持在計算器下方。也許我需要一個媒體查詢來更改button的z-index？

@media screen and (max-height: 300px) { 
    #instructions button { 
    z-index: -1; 
    } 

}

非常感謝！

來源

2016-11-14 Manish Giri

可能duplicat e [CSS粘滯頁腳邊距]（http://stackoverflow.com/questions/11868249/css-sticky-footer-margin） –

只需做到以下幾點：

變化z-index到1爲#instructions。
Add z-index: 2 for #wrapper。

CSS

#instructions { 
    z-index: 1; 
} 
#wrapper { 
    z-index: 2; 
}

預覽

CodePen：http://codepen.io/anon/pen/vyGPRR

來源

2016-11-14 04:34:43

但是，將按鈕放在計算器應用程序下。現在，如果您縮小瀏覽器範圍，則無法單擊按鈕並獲得說明對話。我正在尋找一種方法來確保按鈕總是在計算器應用程序後面出現，並且始終可以點擊。 –

@Manish啊...現在我明白了。好的，我會檢查並通知你。 –

@Manish檢查一下：[** Sticky Footer **]（https://css-tricks.com/couple-takes-sticky-footer/）是你需要的。 –

CSS：頁腳出現在瀏覽器尺寸縮小的主要內容上

回答

相關問題