我们都知道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. ubuntu安装后没有root密码

    新安装的ubuntu没有设置root密码,也就不能登录到root账户下.要想设置root密码需要在当前账户下输入sudo passwd,然后输入当前用户的密码,然后输入两次root的新密码,即可完成r ...

  2. HDOJ 2082 找单词 (母函数)

    找单词 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  3. MYSQL注入天书之服务器(两层)架构

    Background-6 服务器(两层)架构 首先介绍一下29,30,31这三关的基本情况: 服务器端有两个部分:第一部分为tomcat为引擎的jsp型服务器,第二部分为apache为引擎的php服务 ...

  4. B股

    B股的正式名称是人民币特种股票.它是以人民币标明面值,以外币认购和买卖,在中国境内(上海.深圳)证券交易所上市交易的外资股.B股公司的注册地和上市地都在境内.

  5. 小鲜肉初学JS做得仿京东淘宝竖排二级导航

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equ ...

  6. SqlBulkCopy大批量数据插入到sql表中

    alter TYPE TableType AS TABLE ( Name VARCHAR() , code VARCHAR() ) GO alter PROCEDURE usp_InsertProdu ...

  7. Project Euler 106:Special subset sums: meta-testing 特殊的子集和:元检验

    Special subset sums: meta-testing Let S(A) represent the sum of elements in set A of size n. We shal ...

  8. 使用 Nginx 和 GeoIP 模块来处理不同国家的访问

    安装 Nginx因为要用到 http_geoip_module 模块,系统自带的 nginx 一般不带这个模块,所以要下载 nginx 源代码后自行编译: # wget http://nginx.or ...

  9. Linux基础--文件压缩

    1.compress [root@linux ~]# compress [-dcr] 档案或目录 参数: -d:用来解压缩的参数 -r:可以连同目录下的档案也同时给予压缩呢! -c:将压缩数据输出成为 ...

  10. WordPress定位当前使用模版

    把下面代码插入到wp-includes/template-loader.php,66行 if($_GET[tpl]=='die'){ die($template); } 浏览任意页面,在网址后加上&a ...