有多个页面，有的有固定的头部(设置了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. ffmpeg编解码视频导致噪声增大的一种解决方法

    一.前言 ffmpeg在视音频编解码领域算是一个比较成熟的解决方案了.公司的一款视频编辑软件正是基于ffmpeg做了二次封装,并在此基础上进行音视频的编解码处理.然而,在观察编码后的视频质量时,发现图 ...

  2. [Scoi2014]方伯伯的玉米田 二维树状数组+动态规划

    考试最后半个小时才做这道题.十分钟写了个暴力还写挂了..最后默默输出n.菜鸡一只. 这道题比较好看出来是动规.首先我们要明确一点.因为能拔高长度任意的一段区域,所以如果从i开始拔高,那么一直拔高到n比 ...

  3. CentOS6 安装Sendmail + Dovecot + Squirrelmail

    本文记录在本地虚拟机CentOS6上搭建Sendmail + Dovecot + Squirrelmail 的Webmail环境的过程,仅仅是本地局域网的环境测试,不配置DNS, 也没有安全认证,Sq ...

  4. 马的遍历 洛谷 p1443

    题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个点最少要走几步 输入输出格式 输入格式: 一行四个数据,棋盘的大小和马的坐标 输出 ...

  5. 使用pg_upgrade工具为PostgreSQL进行版本升级

    公司的测试环境和生产环境都是9.2.4版本,而开发环境是9.0.18版本. PS: 不知道公司里的其它同事,是如何做数据库迁移的,利用第三方可视化工具备份数据库,然后恢复到其它高版本的环境?反正我没成 ...

  6. Hadoop之HelloWorld

    Hadoop开始: 1. 下载最新的发行版,解压到你喜欢的路径. 2. 配置,Hadoop的配置文件位于-/hadoop/conf/ 目录下.这里我先只配置了core-site.xml文件. < ...

  7. 一步一步学J2SE-ConcurrentHashMap原理

    ConcurrentHshMap的数据结构是由一个Segment数组和多个HashEntry数组组成,在Segement数组中包含了HashEntry数组.数据结构如下图所示: Segement数组的 ...

  8. a标签链接到当前页内指定位置

    <a name="me">hello</a><br/><br/><br/><br/><br/>& ...

  9. [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数

    一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...

  10. 2017-05-4-C语言学习笔记

    C语言学习笔记... ------------------------------------ Hello C语言:什么是程序:程序是指:完成某件事的既定方式和过程.计算机中的程序是指:为了让计算机执 ...