有多个页面，有的有固定的头部(设置了postion:fixed的元素)，有的没有固定的头部，这时就有个问题，有固定头部的页面，头部会遮挡下面的内容，那怎么解决呢？

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>防止fixed元素遮挡其他元素的方法</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    body {

        height: 3333px;

    }

    .fixedtop {

        margin-top: 50px;

    }

    .fixedtop header {

        position: fixed;

        left: 0;

        top: 0;

        height: 50px;

        overflow: hidden;

        width: 100%;

        background: blue;

    }

    .fixedbottom {

        margin-bottom:50px;

    }

    .fixedbottom footer {

        position: fixed;

        left: 0;

        bottom: 0;

        height: 50px;

        overflow: hidden;

        width: 100%;

        background: blue;

    }

    </style>

</head>

<body>

    <div class="fixedtop">

        <header></header>

    </div>

    <h1>1</h1>

    <p>222</p>

    <pre>

        33

            test

    </pre>

    <div class="fixedbottom">

        <footer></footer>

    </div>

</body>

</html>

这样,头部下面的元素h1不用额外设置margin-top，而且由于header外层新增了div.fixedtop,从而实现h1不会被header遮挡了。

防止fixed元素遮挡其他元素的方法的更多相关文章

  1. 网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素

    一:网页中插入flash代码如下:  当然里面的很多属性可以去掉,根据具体的需求而定.  我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...

  2. IE下object元素遮挡div表单

    目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无 ...

  3. CSS 解决z-index上层元素遮挡下层元素点击事件问题

    解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui  "2.8.2" Vue 2.9.6 需求 ...

  4. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  5. jquery阻止元素冒泡的两种方法

    通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...

  6. [转]-CSS 元素垂直居中的6种方法

    原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...

  7. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

  8. CSS 去掉inline-block元素间隙的几种方法

    最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...

  9. 使用jquery获取父元素或父节点的方法

    今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...

随机推荐

  1. 字符串常用-----atof()函数，atoi()函数

    头文件:#include <stdlib.h>函数 atof() 用于将字符串转换为双精度浮点数(double),其原型为:double atof (const char* str);at ...

  2. Ubuntu虚拟机可以上网，可以ping网络，但是无法update和install，报连接不上服务器的错误解决方案：

    http://askubuntu.com/questions/711889/err-apt-get-update-on-ubuntu-14-04即使给Ubuntu配置了代理,terminal能ping ...

  3. 基于ubuntu14视觉识别乒乓球_1

    串口通信,opencv3.0 窗口大小可调 编译 cmake ../ make ./color 正常光线下运行比较稳定,找圆比较准确.程序设置了圆的半径区间以及圆心最小间距,以满足产品的需求,可自行修 ...

  4. 高性能MySQL之【第十五章 备份与恢复】学习记录

      我们不打算包括的话题:      安全(访问备份,恢复数据的权限,文件是否需要加密)      备份存储在哪里,包括他们应该离源数据多远,以及如何将数据从源头移动到目的地      保留策略.审计 ...

  5. Linux操作系统-命令-vmstat

    叨叨两句 涉及监控服务器性能的命令,除了有vmstat之外,还有top.iostat.netstat.本文只是介绍一下这4个命令中的1个.剩下的3个命令可以参考以下网上的资料就差不多能会了. 推荐to ...

  6. CodeForces 797C Minimal string：贪心+模拟

    题目链接:http://codeforces.com/problemset/problem/797/C 题意: 给你一个非空字符串s,空字符串t和u.有两种操作:(1)把s的首字符取出并添加到t的末尾 ...

  7. 横截面数据分类——基于R

    参考资料: <复杂数据统计方法>&网络&帮助文件 适用情况:在因变量为分类变量而自变量含有多个分类变量或分类变量水平较多的情况. 一. (一)概论和例子 数据来源:http ...

  8. SpringMVC实现垂直搜索引擎

    本篇博客是在上一篇<Lucene搜索引擎+HDFS+MR完成垂直搜索>的基础上,在数据收集之后的JSP/Servlet方面,换为SpringMVC框架来实现. 借助SpringMVC技术完 ...

  9. 【社交系统ThinkSNS+研发日记三】基于 Laravel Route 的 ThinkSNS+ Component

    [社交系统ThinkSNS+研发日记系列] 一.<ThinkSNS+ 基于 Laravel master 分支,从 1 到 0,再到 0.1> 二.<基于 Laravel 开发 Th ...

  10. 漫谈ELK在大数据运维中的应用

    漫谈ELK在大数据运维中的应用 圈子里关于大数据.云计算相关文章和讨论是越来越多,愈演愈烈.行业内企业也争前恐后,群雄逐鹿.而在大数据时代的运维挑站问题也就日渐突出,任重而道远了.众所周知,大数据平台 ...