如何用另一個元素覆蓋粘性頁腳？

我有粘在底部（它停留在同頁長和短的網頁底部的。）下面頁腳是它如何用另一個元素覆蓋粘性頁腳？

.footer{ 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 100px; 
    background-color: white; 


}

我想創建一個「揭露」或幕布效果的CSS類似於這個網站上的內容... dartlang.org。（顯然滾動到底部）。我試圖用固定頁腳來做這件事，但我似乎無法讓它工作。

我使用的是軌道和渲染與此代碼頁腳在我application.html.erb文件

<%= render 'shared/footer' unless @disable_footer %>

出於某種原因jQuery的顯示頁腳不希望任何與此設置工作

編輯：這裏是我的頁腳的代碼...它的馬虎，對不起。

<footer class="footer" id="#myfooter"> 
    <body> 
    <div style="background-color: white;"> 
    <hr style="width: 100%;"> 

    <div class="container"> 

    <div class="row"> 
     <div class="container-fluid"> 
     <div class="col-md-6"> 
      <h4>Consulting and Development</h4> 
      <ul style="font-weight: bold;"> 


      <li><%= link_to "Training and Coaching", training_coaching_path%></li> 
     <li> <%= link_to "Business Development", business_development_path%></li> 
     <li> <%= link_to "Automotive Consulting", automotive_consulting_path%></li> 
     <li> <%= link_to "Environmental Consulting", environmental_safety_path%></li> 

      </ul> 
     </div> 

     <div class="col-md-6"> 
      <h4>Quality Product Assurance</h4> 
      <ul style="font-weight: bold;"> 
      <li><%= link_to "Product Inspection and Quality Resolution", containment_and_quality_path%></li> 
      <li><%= link_to "Auditing", auditing_path%></li> 
      </ul> 
     </div> 

     </div> 
    </div> 


    <hr> 

    <div class="row"> 
     <div class="col-md-4"> 
     <h4 style="text-decoration: underline;">Corporate Office Location:</h4> 
     <p>1</p> 
     <p></p> 
     </div> 

     <div class="col-md-4"> 
     <h4 style="text-decoration: underline;">Mailing Address:</h4> 
     <p></p> 
     <p></p> 
     </div> 


     <div class="col-md-4" style="text-align: center"> 
     <p> 
     <a href="mailto:hr"><i class="fa fa-envelope-o fa-2x" aria-hidden="false"></i></a> 
      <a href="https://www.linkedin.com/company/"><i class="fa fa-linkedin fa-2x" aria-hidden="false"></i></a> 
      <a href="https://www.facebook.com/"><i class="fa fa-facebook-square fa-2x" aria-hidden="false"></i></a> 
     </p> 
     </div> 

    </div> 

    <div class="row"> 
     <div class="col-md-12"> 
     <p class="text-muted" style="text-align: center;"> - Copyright 2016 - All Rights Reserved</p> 
     <p class="text-muted" style="text-align: center;"> Homepage background image was <a href="http://www.freepik.com/free-vector/gear-icons-collection_792514.htm">Designed by Freepik</a></p> 
     </div> 



    </div> 


    </div> 
    </div> 
    </body> 
</footer>

來源

2016-05-23 ncrouch25

只需製作一個position: fixed的頁腳，並且比主要內容的z-index更低。確保您的主要內容具有與頁腳高度相同的頁邊空白值以查看它。

html, 
 
    body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .main-content { 
 
     background-color: #333333; 
 
     width: 100%; 
 
     height: 800px; 
 
     margin-bottom: 300px; 
 
    } 
 
    .footer { 
 
     background-color: #0072C6; 
 
     position: fixed; 
 
     bottom: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 300px; 
 
     z-index: -1; 
 
    } 
 
    .footer p { 
 
     color: #000000; 
 
    }

<div class="main-content"> 
 
</div> 
 
<div class="footer"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero.</p> 
 
</div>

來源

2016-05-23 19:35:49 Ricky

啊，謝謝。我錯過了主要內容的保證金 – ncrouch25

很高興工作，歡呼。 – Ricky

你可以通過設置position: relative和主要內容元素在z-index，然後通過你的頁腳組件上設置一個較低的z-index實現這一目標（這應該設置爲position: fixed而非position: absolute）。

例如

.container { 
    position: relative; 
    background: #fff; 
    z-index: 2; 
    margin-bottom: 100px; /* Must be equal to footer height */ 
} 
.footer { 
    position: fixed; 
    bottom: 0; 
    background: red; 
    z-index: 1; 
    width: 100%; 
    height: 100px; 
}

我在這裏敲了一個簡單的演示：http://codepen.io/anon/pen/reXdby。

來源

2016-05-23 19:23:00 Dan

我試過這個，但由於某些原因，它切斷了大部分的頁腳......我會用頁腳代碼更新我的問題 – ncrouch25

給你的主要內容提供一個等於頁腳高度的底部頁邊空白。我已經更新了我的答案和'筆。 – Dan

耶謝謝！那是什麼問題 – ncrouch25

有時當你想看看是如何工作的特定網站的CSS樣式，你只需要使用Web瀏覽器開發者工具（F12）選擇選擇一個DOM元素頁面上的按鈕，跟蹤的CSS樣式，例如屬於您的示例頁面的代碼與隔壁班的一個div：

.footer { 
background:#3f4245 url(../imgs/footer-bg.png) repeat-x left top; 
padding-top:60px; 
padding-bottom:80px; 
position:fixed; 
bottom:0; 
left:0; 
z-index:100; 
height:300px; 
-webkit-transform:translateZ(0)}

這也許幫助您跟蹤別人的CSS在未來的風格，問候。

來源

2016-05-23 20:43:32

如何用另一個元素覆蓋粘性頁腳？

回答

相關問題