详解CSS的定位语法应用

css|详解|语法

  一、CSS定位:position

  语法:

  position : static | absolute | fixed | relative 

  取值:

  static  : 默认值。无特殊定位,对象遵循HTML定位规则 
  absolute  : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义 
  fixed  : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 
  relative  : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置 

  说明:

  检索对象的定位方式。

  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。

  设置此属性值为 relative 会保持对象在正常的HTML流中,但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。

  内容的尺寸会根据布局确定对象的尺寸。例如,设置一个 div 对象的 height 和 position 属性,则 div 对象的内容将决定它的宽度( width )。

  此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 position 。 

  示例:

  div { position:relative; top:-3px } 

  二、CSS定位:Z-index

  语法:

  z-index : auto | number 

  取值:

  auto  : 默认值。遵从其父对象的定位 
  number  : 无单位的整数值。可为负数 

  说明:

  检索或设置对象的层叠顺序。
  较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象,此属性的 number 值为正数的对象会在其之上,而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。

  此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。这个属性不会作用于窗口控件,如 select 对象。在IE5.5+中, iframe 对象开始支持此属性。而在之前的浏览器版本中, iframe 对象是窗口控件,会忽略此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 zIndex 。 

  示例:

  div { position:absolute; z-index:3; width:6px; } 

  三、CSS定位:top

  语法:

  top : auto | length 

  取值:

  auto  : 默认值。无特殊定位,根据HTML定位规则在文档流中分配 
  length  : 由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。请参阅 长度单位  

  说明:

  检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置。
  此属性仅仅在对象的定位( position )属性被设置时可用。否则,此属性设置会被忽略。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 top 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posTop , pixelTop 等运行时特性,以及对象的offsetTop 等特性。 

  示例:

  div { position: absolute; top: 1in; }
  div { position:relative; top:-3px; left:6px; } 

  四、CSS定位:right

  语法:

  right : auto | length 

  取值:

  auto  : 默认值。无特殊定位,根据HTML定位规则在文档流中分配 
  length  : 由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。请参阅 长度单位  

  说明:

  检索或设置对象与其最近一个具有定位设置的父对象右边相关的位置。

  此属性仅仅在对象的定位( position )属性被设置时可用。否则,此属性设置会被忽略。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 right 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posRight , pixelRight 等运行时特性。 

  示例:

  div { position: absolute; right: 1in; }
  div { position:relative; top:-3px; right:6px; }

  五、CSS定位:bottom

  语法:

  bottom : auto | length 

  取值:

  auto : 默认值。无特殊定位,根据HTML定位规则在文档流中分配 

  length : 由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。请参阅长度单位

  说明:

  检索或设置对象与其最近一个具有定位设置的父对象底边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则,此属性设置会被忽略。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 bottom 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posBottom , pixelBottom 等运行时特性。 

  示例:

  div { position: absolute; bottom: 1in; } 

  div { position:relative; bottom:6px; }

  六、CSS定位:left

  语法:

  left : auto | length 

  取值:

  auto  :默认值。无特殊定位,根据HTML定位规则在文档流中分配 
  length  :由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。请参阅长度单位 

  说明:

  检索或设置对象与其最近一个具有定位设置的父对象左边相关的位置。

  此属性仅仅在对象的定位( position )属性被设置时可用。否则,此属性设置会被忽略。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 left 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posLeft , pixelLeft 等运行时特性,以及对象的offsetLeft 等特性。 

  示例:

  div { position: absolute; left: 1in; }
  div { position:relative; top:-3px; left:6px; } 

时间: 2024-08-31 04:52:19

详解CSS的定位语法应用的相关文章

精彩实例详解CSS滤镜教程

css|教程|滤镜|详解 使您由浅入深了解CSS滤镜的使用,是一个不错的教程!希望对您学习CSS有用! 1.实例详解CSS滤镜(1)概述 (2005-05-04) 2.实例详解CSS滤镜(2)Mask属性 (2005-05-04) 3.实例详解CSS滤镜(3)Blur属性 (2005-05-04) 4.实例详解CSS滤镜(4)Chroma属性 (2005-05-04) 5.实例详解CSS滤镜(5)DropShadow属性 (2005-05-04) 6.实例详解CSS滤镜(6)Glow属性 (20

详解CSS定位position及应用场景实例

首先我们对postion属性进行详解. 在CSS3中,对于postion是这么描述的 总结如下:static 是默认布局,设置top\left..属性不会有作用.relative是相对布局,设置的top\left..会相对文件中的控件.absolute是绝对定位,设置的top\left..会相对整个页面而定.fixed是相对浏览器窗口定位,设置的top/left属性,是相对于浏览器窗口的位置. 除此之外,经过我代码测试:1.如果top\left..其中某属性缺省,absolute,fixed布局

详解css定位与定位应用

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是:position:relative | absolute | static | fixed static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-

详解CSS选择器、优先级与匹配原理

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择

详解CSS定义HR水平线的几种样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  &

实例详解CSS滤镜(5)DropShadow属性

ado|css|滤镜|详解 DropShadow属性是为了添加对象的阴影效果的.它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影.看一看它的表达式: Filter:DropShadow(Color=color,Offx=Offx,Offy=offy, Positive=positive) 该属性一共有四个参数: Color代表投射阴影的颜色. Offx和offy分别X方向和Y方向阴影的偏移量.偏移量必须用整数值来设置.如果设置为正整数,代表X轴的右方向和Y轴的向下方向.

实例详解CSS滤镜(4)Chroma属性

css|滤镜|详解 Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下: Filter:Chroma(color=color) 这个属性的表达式是不是很简单,它只有一个参数.只需把您想要指定透明的颜色用Color参数设置出来就可以了.比如下面这幅图: 图中显示两种字体,两种颜色,我们现在对"leaves"字体添加chroma属性,使其透明.代码如下: <html> <head> <title>chroma filter</ti

实例详解CSS滤镜(3)Blur属性

css|滤镜|详解 假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊.CSS下的blur属性就会达到这种模糊的效果. 先来看一下blur属性的表达式: filter:blur(add=add,direction,strength=strength) 我们看到blur属性有三个参数:add.direction.strength. Add参数有两个参数值:true和false.意思是指定图片是否被改变成模糊效果. Direction参数用来设置模糊的方向.模糊效果是按照顺时针方向进行的.其

实例详解CSS滤镜(2)Mask属性

css|滤镜|详解 Mask属性为对象建立一个覆盖于表面的膜.它的表达式也很简单: Filter:Mask(Color=颜色) 只有一个Color参数,用来指定使用什么颜色作为掩膜. 同样,我们来看一下一幅图片在加上mask属性前后的效果(见下图): 加上MASK属性的效果就好象是在用有色眼镜看物体一样.上面的效果的代码如下: <html> <head> <title> mask filter </title> <style>//*设置CSS样式