佈局解決懸浮固定導航欄遮擋頁面主體內容問題（主要考慮遮擋錨點問題）

時間 2019-12-05

標籤佈局解決懸浮固定導航遮擋頁面主體內容問題主要考慮简体版

原文原文鏈接

佈局解決懸浮固定導航欄遮擋頁面主體內容問題（主要考慮遮擋錨點問題）

做者：吳業飛時間：2018.06.21css

在工做中常常遇到使用position: fixed;固定在頁面頂部的導航欄會遮擋頁面主體內容，特別是在使用錨點跳轉的時候，錨點默認跳轉到視窗頂部，正好被導航遮擋。我使用過兩種方式解決這個問題，各有優劣，視具體需求而定。html

導航fix定位下的解決方案

思路是將錨點安在真正要使用錨點定位的元素的上一個兄弟元素上，文字表述有點繞，show the code!
假設咱們要安錨點的元素是wordpress

<div id="backToTop">
	我要瞬移到頂部！
</div>
複製代碼

如今咱們修改html結構佈局

<div id="backToTop">
	</br>
	</br>
	</br>
	</br>
</div>
<div>
	我要瞬移到頂部！
</div>
複製代碼

原理很簡單，我用</br>換行粗暴地撐開了必定的高度實現不被導航欄遮擋。這樣的缺點是破壞了佈局，撐開的間距可能會比較難看，若是導航的高度不是太大這點間距能夠接受，若是導航的高度太高頁面就會有較大留白，因此我不傾向使用這種方式，畢竟設計師要求100%還原設計稿。spa

使用absolute定位佈局，從佈局角度完全解決遮擋問題

思路：不使用fix定位導航欄，直接將導航欄獨立出來，不參與頁面滾動，模擬懸浮固定效果。
html設計

<body>
    <div class="page">
      <div class="header"></div>
      <div class="content">
        <div class="footer"></div>	
      </div>
    </div>
 </body>
複製代碼

csscode

.page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.header,
.content {
	position: absolute;
	left: 0;
	right: 0;
}

.content {
	top: 90px;//這裏的90px是留出頭部導航欄的高度，頭部多高這裏就多高
	bottom: 1px;//這裏之因此設置1px是由於若是不設置將不會有頭部‘懸浮固定’效果，頭部將會隨頁面一塊兒滾動，設置了1px之後滾動條只出如今content區域，從而模擬懸浮固定效果
	overflow: auto;//關鍵代碼！能夠讓content區域出現滾動條而不是整個page區域滾動，配合bottom:1px使用！
}
複製代碼

這個解決方案看起來完美地解決了遮擋問題，由於錨點確實只會跳到content區域的頂部，由於BFC了（不瞭解BFC的請自行Google，非本文重點在此不加闡述），可是在一個場景下是不適用的！就是頭部半透明效果下的懸浮固定！由於咱們佈局的緣由，content根本不會滾動到header下面，天然不可能實現半透明懸浮了，因此請根據具體需求選擇解決方案！htm

參考文獻

【1】張鑫旭.CSS 相對|絕對(relative/absolute)定位系列.www.zhangxinxu.com/wordpress/?…get

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。