使設置了position:fixed的元素不與下面的元素重疊

原創 Accept_1 2020-06-28 04:11

方法一： header設置了position:fixed定位後，下一個div(main)會上移，可以給header部分設置高，然後main設置一個margin-top,可以實現兩個div分開，另外設置position:fixed的部分，一定要設置top:0； left:0; 不然會引起margin-top失效。

方法二： 在設置了fixed的div下再設置一個空的div，設置成你要佔據的高度即可。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

用HTML+css做既好看又實用的導航欄

導航欄 效果圖如下： 代碼如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

文情战 2020-07-08 09:12:55

HTML+css做炫酷的3d盒子反轉

3d盒子反戰 效果如圖如下： HTML重要的代碼如下： <ul> <li> <div class="box"> <div class="front">目錄

文情战 2020-07-08 09:12:55

Vue 學習之 Electron-vue 小意外

安裝 vue create projectName //安裝electron 及vue 支持組件 vue add electron-builder 頁面中打印 process.title=“browser” 最開始在 “

繁夜 2020-07-07 22:12:23

關於JavaScript繼承的幾種方法

前言 繼承是JavaScript面向對象編程非常重要的一個特性，基本在日常使用以及面試過程中都會使用到。查閱一些資料後整理以下幾種繼承的方法記錄在自己的博客中。 如何實現繼承 原型鏈繼承 原型鏈繼承是最簡單的一種繼承方式，只

繁花已落 2020-07-06 15:06:58

jqPaginator.min.js分頁，bootstrap漂亮的中文分頁條（demo）

第一步，先下載bootstrap分頁插件，https://pan.baidu.com/s/1z339NyWctCbwKw2Z2nBCcg 第二步，將js和css放入你的工程目錄，並導入界面 <link href="/util/res/m

枯枫叶 2020-07-06 13:53:45

set方法引出一系列故事

前言 編寫vue代碼的要求，要求在頁面上實現添加更改數據，頁面能同步更新數據。vue中提供了set方法，這個方法不僅用於數組也用於對象。除此之外，關於數組還可以通過數組的變異方法、數組的引用方法來實現。對象的話就還有對象引用方法可達到此目

神秘人加1 2020-07-06 06:15:47

重學前端-模塊一Javascript 1-9講

文章目錄關於類型的細節爲什麼有的編程規範要求用 void 0 代替 undefined？字符串有最大長度嗎？0.1 + 0.2 ≠ 0.3 ？ES6 新加入的 Symbol 是個什麼東西？爲什麼給對象添加的方法能用在基本類型上？J

xiaoxiezZ 2020-07-06 04:32:01

HTML開發規範

文章目錄HTML代碼規範一般規則一般樣式規則通用格式規則一般元規則HTMLHTML樣式規則HTML格式規則 HTML代碼規範 參考google HTML代碼規範。 一般規則 一般樣式規則 [Protocol] 儘可能使用HTTPS

xiaoxiezZ 2020-07-06 04:32:01

關於解決用標籤做圖標不能顯示的問題

今天在做一個項目時，用到<i>標籤來做小圖標，發現設置完相關樣式，小圖標盡然不能顯示，找了許多辦法都不能解決，後來我發現原來<i> 標籤是行內元素，定義寬高無效，應把它轉換爲塊級元素，於是我設置了display:inline-bl

轩陌Ding 2020-07-05 05:55:40

前端面試題總結（不斷更新修改）

前言 因爲一些特殊原因，剛入職半年又重新找工作，發現之前的面試題已經忘了，因此在此記錄並不斷更新。 面試題不是靠死記硬背，而是在短時間儘量多的備戰可能問到的題目，答案則是需要理解更深層的原理，回答時才能夠從容不迫，這便需要花費更多

GJWeigege 2020-07-05 00:20:03

Vue 學習之 Electron 使用github 自動更新

1.安裝electron-updater 使用yarn yarn add electron-updater 或者使用 npm npm install electron-updater 2.使能 發佈到Github 功能

繁夜 2020-07-04 13:37:10

【總結】gulp，本地web服務器

一.gulp(前端自動化工具)(mac系統) 參考網頁：https://blog.csdn.net/c_kite/article/details/73165427 1.安裝全局gulp命令   npm install -g gulp 創建

YIYIYI1205 2020-07-03 13:05:55

CSS簡介之屬性和選擇器

CSS的作用 通過標籤美化界面，僅此這一個作用 css的好處 1，不用記憶哪些屬性屬於哪些標籤 2,，需求變更時，不用修改大量代碼就可滿足 css的格式 注意：style標籤必須寫在head的開始和結束標籤之間 css學習的內容 學習c

神秘人加1 2020-07-03 06:38:32

querySelectorAll和getElementsByTagName獲取元素的區別

querySelectorAll和getElementsByTagName獲取元素的區別 1、document.querySelectorAll() 根據選擇器獲取所有匹配到的元素 返回的是NodeList，NodeList

fc-cheney 2020-07-02 18:35:34

Vue——邂逅Vue

Vue——邂逅Vue Vue——Vue的基礎語法 Vue——Vue的組件化 Vue——slot_插槽的基本使用 文章目錄1：爲什麼學習Vue2：Vue介紹3：Vue初體驗4：vue的生命週期5：MVVM模型 1：爲什麼學習Vue

福建选手阿俊 2020-07-02 16:08:33