防止fixed元素遮挡其他元素的方法
有多个页面，有的有固定的头部(设置了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元素遮挡其他元素的方法的更多相关文章
- 网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素
一:网页中插入flash代码如下: 当然里面的很多属性可以去掉,根据具体的需求而定. 我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...
- IE下object元素遮挡div表单
目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无 ...
- CSS 解决z-index上层元素遮挡下层元素点击事件问题
解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 需求 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jquery阻止元素冒泡的两种方法
通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...
- [转]-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 ...
- jquery中dom元素的attr和prop方法的理解
一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...
- CSS 去掉inline-block元素间隙的几种方法
最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...
- 使用jquery获取父元素或父节点的方法
今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...
随机推荐
- n以内质数占的比例
2 ->0.5 10 ->0.4 100-> 0.25 1000->0.168 10000->0.1229 100000->0.09592 1000000-> ...
- 基于 Vue 全家桶制作的移动端音乐 WebApp
- react入门之使用react-bootstrap当轮子造车（二）
react入门之使用react-bootstrap当轮子造车(二) 上一篇我们谈了谈如何配置react的webpack环境 react入门之搭配环境(一) 可能很多人已经打开过官方文档学习了react ...
- Linux 磁盘分区修改与管理
--Linux 磁盘分区修改与管理 -----------------------------2014/03/05 1. 目的,将磁盘卷/dev/cciss/c0d0p8修改成新的用途. 原: /de ...
- Kotlin 初窥门径[1]:基础概念
Kotlin 是由 JetBrains 开发的基于JVM的语言.JetBrains 因为创造了一个强大的Java开发 IDE(Intellij) 而被大家所熟知.Android Studio 就是基于 ...
- 从源码理解Spring原理，并用代码实现简易Spring框架
前言(本文为原创,转载请注明出处) 个人之前对于框架的学习,就停留在配置,使用阶段.说实话过段时间就会忘得荡然无存.也不知道框架的运行逻辑,就是知道添加个注解,就可以用了. 由于实习,时间比较多,也感 ...
- 备注： ubt 16.04 安装 gtx 1060 --- 成功运行 tensorflow - gpu
---------------------------------------------------------------------------------------------------- ...
- Django更新后的配置修改
问题: Django 升级至1.7.1后,出现urls配置错误. 解决方法总结: 修改urls: 1,加入admin.autodiscover()函数. 2,除了地址admin不做修改外,其余全部删除 ...
- 如何搭建个人博客网站(Mac)
一直以为自己记忆力很好,毕业之后才发现,之前需要看一遍就能记住的东西,现在看两三遍才能有印象.而搞技术的,如果不及时的记录下当时的情景,过后很容易就忘记.所以,再次萌生了搭博客.写文章的想法(之前用D ...
- Mongodb 监测
原文地址:伍仪洲的博客 介绍 为什么要进行监控状态,因为在实际的情况中可能会发生一下无法预计的情况,比如阻塞的问题,阻塞的原因会有很多种情况造成,如果当我们查询文档的时候发生了阻塞,那么就会影响到后面 ...