CSS中position:fixed的用法
我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed。我平时比较常用absolute和relative,而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持此属性”。
有时候在做项目时需要使一个层相对于浏览器边框固定,如果用position:absolute,发觉absolute是对网页边框而言的。根据滚动条的移动,动态地改变left和top的值的JavaScript语句,虽然能实现了类似的效果,但滚动条移动时,那个层晃来晃去的,感觉不好看,想要一种能使层固定不动的做法。
这样的代码:
<style type="text/css">
<!--
#page {
width:30px;
height:20px;
background-color:green;
position:fixed;
left:60px;
top:100px;
}
-->
</style>
在IE8、Firefox、Opera、Google等浏览器中测试,都没有问题,唯独低版本的IE中,这个属性无效。我们用上面这段代码来定义页面上的一个层“page”(id=“page”)。这样就能实现我们想要的效果了。
CSS中position:fixed的用法的更多相关文章
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
- CSS中position:fixed的相关用法
CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- 在IOS11中position:fixed弹出框中的input出现光标错位的问题
问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
随机推荐
- 在JavaScript中实现yield,实用简洁实现方式。
原题还是老赵的: http://blog.zhaojie.me/2010/06/code-for-fun-iterator-generator-yield-in-javascript.html 原以为 ...
- mydate97时间控件最大值最小值限制及Javascript日期判断大小
<script language="javascript" type="text/javascript" src="<%=basePath ...
- Java 8怎么了之二:函数和原语
[编者按]本文作者为专注于自然语言处理多年的 Pierre-Yves Saumont,Pierre-Yves 著有30多本主讲 Java 软件开发的书籍,自2008开始供职于 Alcatel-Luce ...
- 【基本算法】 KMP文本串模式串的字符串匹配算法
看了两个晚上的KMP,加上基本的“暴力匹配” 今晚看懂next[j]递归求解时,突然觉得算法真的好美妙,虽然觉悟的晚但晚胜过没有是吧! 我的博客都是应试性的学习笔记,不具备指导性,还是大神们写的好,例 ...
- Error Code: 1175 Mysql中更新或删除时报错(未带关键字条件)
SET SQL_SAFE_UPDATES = 0; SQL_SAFE_UPDATES = {0 | 1} 如果设置为0,则MySQL会放弃在WHERE子句或LIMIT子句中不使用关键字的UPDATE或 ...
- ios开发之AppDelegate
创建应用程序之后之后,默认有AppDelegate.h文件与AppDelegate.m文件. AppDelegate为何物? AppDelegate为整个应用的一个代理,提供程序启动.退出等类似 ...
- (转)价值240万的photoshop中文教程,错过了后悔都来不及 (吹得好响)
PS抠图方法 一.魔术棒法——最直观的方法 适用范围:图像和背景色色差明显,背景色单一,图像边界清晰. 方法意图:通过删除背景色来获取图像. 方法缺陷:对散乱的毛发没有用. 使用方法:1.点击“魔 ...
- php 修改 AppServ 下Apache 端口
php 修改 AppServ 下Apache 端口 步骤一:把 C:\AppServ\Apache2.2\conf 中httpd.conf修改了 还不正确 步骤二:把httpd.conf 中List ...
- PLSQL:plsql中文乱码,显示问号
PLSQL执行sql语句,不识别中文,输出的中文标题显示成问号???? 1. 登陆plsql,执行sql语句,输出的中文标题显示成问号????:条件包含中文,则无数据输出
- C++名字空间/C++命名空间
0.序言 名字空间是C++提供的一种解决符号名字冲突的方法. 一个命令空间是一个作用域,在不同名字空间中命名相同的符号代表不同的实体. 通常,利用定义名字空间的办法,可以使模块划分更加方便,减少模块间 ...