[css 實踐篇] 解決懸浮的
遮擋內容的處理技巧


我寫的實踐篇 都是自己在實踐項目所遇到的 “攔路虎”

還是很有借鑒的意義的。(實踐才是檢驗真理的唯一標准呀),廢話不多說,進去正題

position: fixed 絕對固定底部后會擋住內容

沒錯,不做處理的話,是會遮住的(定位 脫離了文檔流)。

很簡單:增加同高度占位元素

一目了然。直接貼代碼

 

 1 <!-- footer外包裹一層div-->
 2 <div>
 3     <!--充當占位符的div塊,無實質內容 -->
 4     <div style="height:60px;"></div> 
 5 
 6     <!--fixed懸浮出來的footer -->
 7     <section class='footer'>
 8         <div class='reply-topic'>回復主題</div>
 9     </section>
10 </div> 

 

 

出來后的效果圖

 

頭部分被遮擋了,也是很簡單的給元素 一個上邊距就好了呀!

同樣給占位元素,也是可以達到理想效果的(不信,你可以試試看。自己動手才是豐衣足食哦)

 

 小技巧你學會了嗎?

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM