有多个页面，有的有固定的头部(设置了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. cobbler无人值守批量安装Linux系统

    本文目录: 1.1 pxe安装系统 1.2 cobbler基本介绍 1.3 安装和配置cobbler 1.3.1 安装cobbler 1.3.2 配置dhcp和tftp 1.4 cobbler从本地光 ...

  2. TP3.2二级导航与高亮显示

    闲来无事,记记笔记 二级导航的实现,就是一个二级联动,嗯 先来看看数据库,我喜欢用一个表,表多了就不好玩了 二级代号取一级导航的代号就行了,做个简单的栗子: 代码部分: 看控制器,大头在这: < ...

  3. virtual与static

    virtual与static不能同时作用于一个函数.根据面向对象的理论,virtual的成员函数是可以变子类覆盖的,是实现多态的重要手段.而static作用的成员函数表示该函数仅属于某个类. 下面是实 ...

  4. 从零宽断言说起到用python匹配html标签内容

    版权声明:本文为博主原创文章,转载请附带原文网址http://www.cnblogs.com/wbchanblog/p/7411750.html ,谢谢! 提示:本文主要是讲解零宽断言,所以阅读本文需 ...

  5. jenkins 邮件添加附件

    背景 当CI执行失败的时候,想获取到失败的用例,然后在本地调试,testNG是自带一个testng-failed.xml来记录的: 想法:尝试使用git 来push这个文件到远程仓库,然后本地pull ...

  6. 论文写作office实用技巧

    最近在写论文,然后要按照模板来写,其中office排版有很多技巧;先前一直没有弄透彻,今晚上终于完美收工! 主要问题如下 MathType破解版 Mathtype试用版,到期后要卸载干净,才能再次下载 ...

  7. 从零构建一个react+webpack+typescript的应用

    今天要完成在windows下从零开始构建一个react应用的任务 首先,新建一个文件夹,然后在该文件夹下使用命令npm init 初始化一个node项目. 然后安装所需依赖, npm i react ...

  8. ASP.NET Core开发期间部署到IIS自定义主机域名并附加进程调试

    在.NET Framework环境下,我们经常会这么做 把一个web项目不经过发布直接部署到IIS里去,配置上主机名,修改一下hosts文件,就可以用自定义的域名来访问我们的应用程序,使用附加到进程( ...

  9. Java 的概述

    Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是有SunMicrosystems公司于1995年5月推出的Java程序设计语言和Java平台(即JavaSE,JavaEE,JavaME ...

  10. [Spring面试] 问题整理

    1.谈谈你对spring IOC和DI的理解,它们有什么区别? IoC:Inverse of Control 反转控制的概念,就是将原本在程序中手动创建UserService对象的控制权,交由Spri ...