有多个页面，有的有固定的头部(设置了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. JDBC连接数据库的基本步骤

    第一步:注册驱动==>:Class.forName("数据库驱动的完整名称(mysql的数据库驱动名称:com.mysql.jbdc.Driver)"); 第二步:创建一个数 ...

  2. 中国大学MOOC-陈越、何钦铭-数据结构-2015秋 01-复杂度2 Maximum Subsequence Sum (25分)

    01-复杂度2 Maximum Subsequence Sum   (25分) Given a sequence of K integers { N​1​​,N​2​​, ..., N​K​​ }. ...

  3. latch相关视图整理

    latch相关视图整理(原创) V$LATCH V$LATCH视图在选取X$KSLLT记录时,进行了Group By及SUM运算,从而得出了一个汇总信息,保存了自实例启动后各类栓锁的统计信息.常用于当 ...

  4. C++算法接口使用参考

    C++算法接口参考 算法参考:[algorithm] 编译:g++ -std=c++11 xxx_algorithm.cpp 运行:./a.out 1.保持原序列运算 all_of template ...

  5. Dynamics CRM:Word Template Feature 的使用和实际遇到问题解决方案

    Word Template 是Dynamics CRM 2016 中的其中一个新的功能.Word Template 就是文档模板,用于在Dynamics CRM中定义文档模板,从而对实体记录按照文档模 ...

  6. Postman 官网教程,重点内容,翻译笔记,

    json格式的提交数据需要添加:Content-Type :application/x-www-form-urlencoded,否则会导致请求失败 1. 创建 + 测试: 创建和发送任何的HTTP请求 ...

  7. 【转载】B树、B-树、B+树、B*树

    转载自http://blog.csdn.net/manesking/archive/2007/02/09/1505979.aspx B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和 ...

  8. JAVA在win10上的安装环境配置

    [TOC] 第一步: 打开右击电脑选择属性 第二步: 选择高级系统设置 第三部: 选择环境变量 第四部: 选择在系统变量中新建:JAVA_HOME 属性值为你的java的jdk的位置比如我的:E:\J ...

  9. Tomcat修改端口

    当在服务器上运行报错说端口已占用的时候,需要修改Tomcat的端口,步骤如下: 一.找到Tomcat的安装目录 二.进入conf目录,找到server.xml文件,记事本打开 此时文件中有三个地方可以 ...

  10. ELK搭建指南（linux及Windows）

    当前公司系统使用mongodb记录日志,最近想对日志做可视化分析,尝试了exceptionless,感觉扩展性不高,所以尝试搭建elk,过程如下: ELK核心由三部分组成: Elasticsearch ...