我们都知道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. sencha Touch 2.4 学习之 XTemplate模板

    XTemplate模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  2. 使用Visual Studio 2012 开发 Html5 应用

    Visual Studio 一直以来是开发微软旗下应用的利器,只要是开发微软相关的应用无论是Windows程序,WPF,Asp.Net,WinRT Surface,WindowsPhone 等微软旗下 ...

  3. 初步体验javascript try catch机制

    javascript在ECMAScript3中引入了try catch finally机制,大致原理和其他语言一样. 我们也可以自定义错误事件. 但是事先声明:我们自定义的错误事件,只支持对name. ...

  4. HDU3341 Lost's revenge(AC自动机&&dp)

    一看到ACGT就会想起AC自动机上的dp,这种奇怪的联想可能是源于某道叫DNA什么的题的. 题意,给你很多个长度不大于10的小串,小串最多有50个,然后有一个长度<40的串,然后让你将这个这个长 ...

  5. POJ 2075

    #include<iostream> #include<stdio.h> #include<string> #include<map> #include ...

  6. ubuntu第一次设置root密码

    安装ubuntu时,系统让用户创建了一个非root用户,系统启动后使用这个用户,在需要执行超级用户权限的指令时,可以通过sudo来执行.为此我们可以通过这样的方式修改root的密码:dengfei@d ...

  7. C#--判断当前是否是移动设备和设备的型号

    --如果是移动设备是true var ismobile = System.Web.HttpContext.Current.Request.Browser.IsMobileDevice; --设备型号( ...

  8. Baidu和Google搜索引擎使用技巧(转)

    转自:Baidu和Google搜索 http://www.douban.com/note/261208979/ 百度搜索一:基本搜索   二:高级搜索   谷歌搜索一:基本搜索1)可部分匹配也可完全匹 ...

  9. 一个轻量级的3D CSS 库

    JavaScript 3D library 该项目的目的是为了打造轻量级的.实用简单的3D CSS库. Usage使用方法 下载 minified库文件 和 css文件,并将其包含于你的HTML中,就 ...

  10. C之算法

       1° 选择排序算法    核心思路如下图: 以字符串排序进行说明 #include <stdio.h> #include <string.h> #define SIZE ...