position两三事
作者:aslen 来源:蓝色理想 发布时间:2009-02-16 15:23:00
position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。所以实际上可用的值只有3个 为了方便阅读~
以下统称为:固定(fixed)、相对(relative)、 绝对(absolute).
第1:固定定位(fixed)
固定定位可以让某一元素固定在屏幕的某个位置.其效果和背景的background-attachment:fixed属性相似!但是IE6以及更早的版本不支持.所以以下例子请在非IE6以下浏览器下浏览
例子:
运行代码框
第2:相对定位(relative)
相对定位是依据设置定位属性的4个方向上的任意值来实现相对与其本来在文档中正常显示的位置的偏移;
当相对定位的元素偏移出其本来的文档流的位置:其他元素仍然认为那个位置为其的逻辑文档流区域.而不会去补上去,虽然我们感官上认为那里是没有东西的~
例子:
运行代码框
其中第2个色块就是相对于其本来的文档流中的位置依据left:10px;top:20px;的定位属性值进行偏移.
其后面的第3个色块依然认为前面的空白(就是第3的原本的文档流的位置)为第3个色块的文档流区域 则不会自动填充上去.
当相对定位的父元素出现滚动条时,IE浏览器的特殊情况
例子:
运行代码框
当相对定位的父元素有滚动条的时候,该相对定位元素再IE的表现很诡异(其后面的元素依然认为那个位置为该元素的默认位置,而表现出相对定位的特性,但是拉动滚动条时,在FF下正常即相对定位的元素和文档一起滚动,但是在IE系列里面,相对定位的色块依然在原地不动,此时元素的特性有点像绝对定位)
当相对定位同时拥有定位属性的4个方向的值和margin属性。相对定位的定位属性 top right bottom left和margin-top margin-right margin-bottom margin-left;各个方向上一至的时候其值会产生叠加效果,而按照方向执行叠加后的数值的偏移
例子:
运行代码框
猜你喜欢
- 下面继续为大家带来XHTML与HTML兼容的16条指引!1.避免将页面声明为XML类型,页面使用UTF-8或者UTF-16字符集。2.在空元
- 在绝大多数查询中,MySQL使用哪种校对规则进行比较是很显然的。例如,在下列情况中,校对规则明显的是“列x的列校对规则”:SELECT&nb
- 在SQL Server数据库中,有min server memory与max server memory两个内存选项。数据库管理员合理设置这
- 由于 window.onload 事件需要在页面所有内容(包括图片等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本。其实
- 最近因工作需要,要在静态页面上实现分页,想了下,决定用AJAX来实现,所以就捣鼓了下面这么个东西,截图如下:更多关于分页的文章演示地址:ht
- 用户体验已经是一个老生常谈的话题了。我非常赞同某位达人所说的,用户体验设计应该贯穿于产品从萌芽到出生的整个过程,产品原型、视觉设计、前端开发
- 1. A List Apart CSS TopicsA List Apart是一个CSS优秀文章的收集网站,从1999年开始收集文章,关注最
- 如何 在Access中选择指定日期前的记录?我知道,在Access中不能使用DateDiff,那么我们怎样才能选择指定日期前的若干记录呢?虽
- 最近在处理Qzone黄钻图标更新时,想起近期对业务图标进行优化所遇到的一些问题,把思绪收拾起来和大家一共探讨,欢迎多方声音。在实际工作中,图
- 以下为引用的内容: <html> <head> <title>不刷新页面查询的方法&
- select a.f_username from ( SELECT /*+parallel(gu,4)*/distinct gu.f_use
- 一、功能简述正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我
- 下面就来介绍下SQL Server 2008中使用的端口有哪些:首先,最常用最常见的就是1433端口。这个是数据库引擎的端口,如果我们要远程
- Asp中Server.ScriptTimeOut属性需要注意的一点Server.ScriptTimeout 这个属性给定Asp脚
- 在html 5增加了新元素header、footer,测试过发现IE不能解析html 5新增的元素。代码如下:<!DOCTYPE&nb
- 如果需要在查询语句返回的列中包含一列表示该条记录在整个结果集中的行号, ISO SQL:2003 标准提出的方法是提供 ROW_NUMBER
- 在计算机普及的现代设计领域,文字的设计的工作很大一部分由计算机代替人脑完成了(很多平面设计软件中都有制作艺术汉字的引导,以及提供了数十上百种
- 很多时候,设计师们都会通过各种渠道去了解用户的需求,然而从这些渠道反馈回来的信息大部分只是用户的期望并不是真正的用户需求,但是很多时候这些期
- 在使用ORACLE的过程过,我们会经常遇到一些ORACLE产生的错误,对于初学者而言,这些错误可能有点模糊,而且可能一时不知怎么去处理产生的
- 它是第一个既能用于数据加密也能用于数字签名的算法。它易于理解和操作,也很流行。算法的名字以发明者的名字命名:Ron Rivest, Adi