防止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()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...
随机推荐
- 为什么是Spring Boot
原文:https://dzone.com/articles/why-springboot 作者:Siva Prasad Reddy Katamreddy 译者:Oopsguy 本文介绍将各种Sprin ...
- C#字符串格式化（摘抄的，留下来用用）
1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:￥0.20 (英文操作系统结果:$0 ...
- eclipse导入lombok后打不开（如果你的lombok不是最新的，那就来下载最新的）
如果你的不是最新的,去这里下载最新版的,先点击左上角的Download红方块,然后再点击下图中的位置 https://projectlombok.org/ 下载完后把eclipse关掉,双击下载的ja ...
- android学习SeekBar的使用
SeekBar介绍听歌的时候,我们常常想快进或者快退到某一时间段,听歌的时候我们控制音量大小听歌,SeekBar可以通过滑块的位置来标示数值,而且拖动条允许用户拖动滑块来改变进度条的大小 SeekBa ...
- ReactiveCocoa源码解读（二）
上一篇解读了ReactiveCocoa的三个重要的类的底层实现,本篇继续. 一.RACMulticastConnection 1.应用 RACMulticastConnection: 用于当一个信号被 ...
- [H5]range对象的setStart/setEnd方法
1.setStart:表示某个节点的range对象的起点位置;2.setEnd:表示某个节点的range对象的结束位置; 示例如下:<body> <div id="div& ...
- 【Spring 核心】高级装配
高级装配用来适应开发和生产 不同环境下的软切换 一.环境与profile 1.开发环境下的profile package com.bonc.config; import javax.sql.DataS ...
- 如何安装Windows 7旗舰版
如何安装Windows 7旗舰版.. ----------------- Windows 7旗舰版安装的初始画面 ------------------------- 选择好语言后,点击“下一步”按钮, ...
- Andrew Ng机器学习课程笔记--汇总
笔记总结,各章节主要内容已总结在标题之中 Andrew Ng机器学习课程笔记–week1(机器学习简介&线性回归模型) Andrew Ng机器学习课程笔记--week2(多元线性回归& ...
- 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助
最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...