我们都知道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的用法的更多相关文章

  1. css中position:fixed实现div居中

    上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...

  2. CSS中position:fixed的相关用法

    CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...

  3. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  4. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  7. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  8. 深入理解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 ...

  9. 1:CSS中一些@规则的用法小结 2: @media用法详解

    第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

随机推荐

  1. fiddler 代理不成功调试

    按照 http://jingyan.baidu.com/article/03b2f78c7b6bb05ea237aed2.html 设置. 之前可以用, 现在不能用. 1. 关闭 系统防火墙 2. 换 ...

  2. vs2008 添加与修改模板.

    添加 我的模板: 路径:  C:\Users\Administrator\Documents\Visual Studio 2008\Templates\ItemTemplates\Visual C# ...

  3. MYSQL导入导出.sql文件(转)

    一.MYSQL的命令行模式的设置: 桌面->我的电脑->属性->环境变量->新建-> PATH=“:path\mysql\bin;”其中path为MYSQL的安装路径. ...

  4. ZendStudio导入一个已有的网站

    解决方法:新建'PHP Project',选择'Create project at existiong location(from existing source)',路径指向你的网站根目录.

  5. zend studio插件

    1.安装使用Aptana插件(html,css,js代码提示功能) 安装步骤: 1).zend studio->Help->Install New Software->work wi ...

  6. 再深入一点ajax

    1.建立兼容性强的XHR对象有那么复杂么? 看过一些书,书上为了写针对低版本IE和其他非IE浏览器需要写一大串兼容函数,典型的就是JS高级程序上的. 可是在现实开发中,为了兼容IE6/IE7,只需要这 ...

  7. main函数和启动例程

    为什么汇编程序的入口是_start,而C程序的入口是main函数呢?本节就来解释这个问题.在讲例 18.1 “最简单的汇编程序”时,我们的汇编和链接步骤是: $ as hello.s -o hello ...

  8. windbg内核诊断方式--转载

    一.WinDbg是什么?它能做什么? WinDbg是在windows平台下,强大的用户态和内核态调试工具.它能够通过dmp文件轻松的定位到问题根源,可用于分析蓝屏.程序崩溃(IE崩溃)原因,是我们日常 ...

  9. codeforces 455B A Lot of Games(博弈,字典树)

    题目 参考自博客:http://blog.csdn.net/keshuai19940722/article/details/38455269 //字典树,博弈 根据当前节点的后续来确定当前节点的状态, ...

  10. HDU 2669 Romantic(扩展欧几里德, 数学题)

    题目 //第一眼看题目觉得好熟悉,但是还是没想起来//洪湖来写不出来去看了解题报告,发现是裸的 扩展欧几里得 - - /* //扩展欧几里得算法(求 ax+by=gcd )//返回d=gcd(a,b) ...