CSS中position:fixed的用法
我们都知道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的用法的更多相关文章
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
- CSS中position:fixed的相关用法
CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- 在IOS11中position:fixed弹出框中的input出现光标错位的问题
问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- 深入理解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 ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
随机推荐
- tomcat集群 (自带Cluster集群)
不用借助其他任何工具,tomcat自身就可以实现session共享,实现集群.以下为大概步骤 1,如果是在同一台机器上,请保持多个tomcat端口(一个tomcat对应三个端口)不相同:如果是不同机器 ...
- windows phone中ListBox的简单使用
学习windows phone数据绑定的一点点心得,在wp系统的APP中经常遇到这样风格的软件,那它们到底怎样实现的呢?我就大致去做了一下,比较粗虐,但基本的都已经有了,实现后的结果为: 哇,这个图截 ...
- HTML页面处理以及资源文件的加载
Javascript 异步加载详解 这篇文章很详细的介绍了HTML的页面处理以及资源文件的加载. 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading ...
- CSS预处理器实践之Sass、Less大比拼[转]
什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...
- HTTP状态码一览表(HTTP Status Code)
copy from:http://www.189works.com/article-43064-1.html 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 100 ( ...
- code::blocks 初使用遇到的问题记录
/* 做本程序遇到的问题:由于使用的是CODE::BLOCKS 开发环境,刚开始使用code::blocks是,什么都 没有设置,居然输入的中文字符串,保存项目后,再次打开,code::blocks不 ...
- HDU 4569 Special equations(数学推论)
题目 //想不出来,看了解题报告 /* 题意:给你一个最高幂为4的一元多项式,让你求出一个x使其结果模p*p为0. 题解:f(x)%(p*p)=0那么一定有f(x)%p=0,f(x)%p=0那么一定有 ...
- POJ 3255
Roadblocks Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 6605 Accepted: 2458 Descri ...
- 【剑指offer】连续子数组最大和
思路dp很清楚,就是要注意细节. int FindGreatestSumOfSubArray(vector<int> array) { ; ], tempsum = array[]; // ...
- Lua的require和module小结
Lua的require和module小结 module特性是lua5.1中新增的,用于设置Lua文件自己的模块,最常用的方式是module(name,package.seeall),有时候lua文件 ...