有多个页面，有的有固定的头部(设置了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. 带有WS-Security验证的webservice

    示例用的是spring+CXF来配置webservice 首先是web.xml配置,将spring,CXF的配置文件加载进去,由于我客户端跟服务端在同一个工程里面,所以配置文件在一块. <con ...

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

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

  3. coder该何去何从

    无论是什么语言的学习,都不是一帆风顺的,如今随着编程大军的壮大,工作越来越难找,各位coder已经把中心偏移到了学历上面,导致技术水平的参差不齐,以及虚假学历的泛滥,这样的恶性循环下,不知前路在何方?

  4. 纯CSS实现垂直居中的7种方法

    今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...

  5. 正则表达式（即：匹配模式Pattern）

    通过学习<正则表达式-Regular-Expression-Tutorial.pdf>这份文档,对正则表达式有了很好的了解,原因只有1个--这份文档写得太好了. 它的下载地址是:http: ...

  6. MySQL执行计划extra中的using index 和 using where using index 的区别

    本文出处:http://www.cnblogs.com/wy123/p/7366486.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...

  7. Linux改变语言设置的命令

    --Linux语言设置--------------2013/09/22Linux中语言的设置和本地化设置真是一个很繁琐的事情,时不时的会出现乱码的情况,在这篇文章中讨论的是shell中出现乱码的一些解 ...

  8. mac制作icns图标

    Key steps:1) Prepare a 1024x1024 png or jpeg file;2) Download fasticns utility to convert the icon t ...

  9. error MSB8008: 指定的平台工具集(v110)未安装或无效。请确保选择受支持的 PlatformToolset 值

    如果你的电脑上有两个不同版本的VS,或者你的程序拷贝到别人的电脑上去运行,或者你是从别人那里拷贝来的项目,而你们俩用的VS版本不一样,就会在运行的时候出现这个问题,这个错误中的v110是VS2012使 ...

  10. Opentk教程系列-1绘制一个三角形

    本系列教程翻译自Neo Kabuto's Blog.已经取得作者授权. 本文原文地址http://neokabuto.blogspot.com/2013/02/opentk-tutorial-1-op ...