我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed。我平时比较常用absolute和relative,而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持此属性”。

有时候在做项目时需要使一个层相对于浏览器边框固定,如果用position:absolute,发觉absolute是对网页边框而言的。根据滚动条的移动,动态地改变left和top的值的JavaScript语句,虽然能实现了类似的效果,但滚动条移动时,那个层晃来晃去的,感觉不好看,想要一种能使层固定不动的做法。

这样的代码:

  1. <style type="text/css">
  2. <!--
  3. #page {
  4. width:30px;
  5. height:20px;
  6. background-color:green;
  7. position:fixed;
  8. left:60px;
  9. top:100px;
  10. }
  11. -->
  12. </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. Codeforces Round #266 (Div. 2) D

    D. Increase Sequence time limit per test 1 second memory limit per test 256 megabytes input standard ...

  2. 2014ACM-ICPC 西安赛区总结

    万万没想到,打铁了.以前一直觉得拿铁咖啡的梗是很好笑的,然后有一天这杯咖啡自己喝下去了,就会发现心里真的被梗住了. 复旦的题其实我是有预料到的,前年的复旦题三题从金区到铜区都有,但是从去年的南京赛区开 ...

  3. 深入浅出ES6(十一):生成器 Generators,续篇

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 欢迎回到深入浅出ES6专栏,望你在ES6探索之旅中收获知识与快乐!程序员们在工作 ...

  4. Mac Air maven 环境配置

    mave 的配置 检出项目遇到问题: Could not calculate build plan: Failure to transfer org.apache.maven.plugins:mave ...

  5. .htaccess文件的作用(访问控制)

    在线工具: http://www.htaccesseditor.com/sc.shtml 说到.htaccess文件,我想对于wordpress新手或者老手都应该不是很熟悉,也没有多少这方面的概念吧, ...

  6. Windows 7,64位机器上安装DB2 7.2+FP7

    1.要想在Windows 7,64位机器上安装DB2 7.2+FP7,注意:1)拷贝所有安装文件到本地2)设置setup.exe文件兼容windows 20003)使得users用户勾选“完全控制”权 ...

  7. WCF分布式开发步步为赢(7):WCF数据契约与序列化

    本节继续学习WCF分布式开发步步为赢(7):WCF数据契约与序列化.数据契约是WCF应用程序开发中一个重要的概念,毫无疑问实现客户端与服务端数据契约的传递中序列化是非常重要的步骤.那么序列化是什么?为 ...

  8. JAVA类型信息——反射机制

    JAVA类型信息——反射机制 一.反射机制概述 1.反射机制:就是java语言在运行时拥有的一项自我观察的能力,java通过这种能力彻底了解程序自身的情况,并为下一步的动作做准备. 2.反射机制的功能 ...

  9. weka平台下手动造.arff的数据

    若数据为 sunny,hot,high,FALSE,nosunny,hot,high,TRUE,noovercast,hot,high,FALSE,yesrainy,mild,high,FALSE,y ...

  10. cache写策略

    cache写策略 Write Through (完全写入) CPU向cache写入数据时,同时向memory也写一份,使cache和memory的数据保持一致.优点是简单,缺点是每次都要访问memor ...