使设置了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