我们都知道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. EXCEL 跨表比较数据

    Public Sub Compare(fullname As String, sheet As String) Dim conn, sql, rows, i, cellContents ,rowInd ...

  2. 输出string vector到file

    #include <fstream> #include <iterator> #include <string> #include <vector> i ...

  3. C# excel操作

    开源的Excel操作项目: http://www.cnblogs.com/lwme/archive/2011/11/27/2265323.html 添加引用:Microsoft Excel 11.0 ...

  4. ZOJ3238 Water Ring(计算几何)

    题意:给你一个圆形和很多个矩形,然后要你求圆形的圆周有多少被矩形覆盖. 思路:比赛的时候是有思路的了,不过一直在调别的题,最后剩下30分钟肯定来不及敲.想法是这样的,要是我们可以求出每个矩形覆盖了圆周 ...

  5. hdu 3271 SNIBB 数位DP+二分

    思路:dp[i][j]:表示第i位在B进制下数字和. 用二分找第k个数! 代码如下: #include<iostream> #include<stdio.h> #include ...

  6. hdu 1538 A Puzzle for Pirates 博弈论

    很经典的问题,思路转载自http://blog.csdn.net/ACM_cxlove?viewmode=contents 题目:这是一个经典问题,有n个海盗,分m块金子,其中他们会按一定的顺序提出自 ...

  7. hdu 4462(状态压缩)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4462 思路:由于数据不大,可以直接将所有的状态表示出来,然后枚举,判断能否将方格全部覆盖. http: ...

  8. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  9. Android 基于Socket的聊天室(一)

    Socket是TCP/IP协议上的一种通信,在通信的两端各建立一个Socket,从而在通信的两端之间形成网络虚拟链路.一旦建立了虚拟的网络链路,两端的程序就可以通过虚拟链路进行通信. Client A ...

  10. AppWidget框架

    AppWidget 框架主要包括以下类: 1.AppWidgetProvider:继承自BroadcastReceiver,在AppWidget应用update.enable.disable和dele ...