搜索
首页web前端css教程详解CSS的定位语法应用

详解CSS的定位语法应用

Dec 15, 2016 pm 01:50 PM

一、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; } 

以上就是详解CSS的定位语法应用的内容,更多相关文章请关注PHP中文网(www.php.cn)!


声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
我们如何标记Google字体并创建Goofonts.com我们如何标记Google字体并创建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由开发人员和设计师丈夫签名的附带项目,它们都是版式的忠实拥护者。我们一直在标记Google

永恒的Web开发文章永恒的Web开发文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人们询问了他们认为是关于网络开发的一些最永恒的文章的建议

与部分元素的交易与部分元素的交易Apr 12, 2025 am 11:39 AM

同一天发表了两篇文章:

使用JavaScript API的状态练习GraphQl查询使用JavaScript API的状态练习GraphQl查询Apr 12, 2025 am 11:33 AM

学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API!碰巧的是,我得到了完美的

组件级CMS组件级CMSApr 12, 2025 am 11:09 AM

当一个组件生活在数据查询居住在附近的数据查询的环境中时,视觉组件与

将类型设置在圆上...带偏移路径将类型设置在圆上...带偏移路径Apr 12, 2025 am 11:00 AM

这里是Yuanchuan的一些合法CSS骗局。有此CSS属性偏移路径。曾几何时,它被称为Motion-Path,然后被更名。我

'恢复”在CSS中有什么作用?'恢复”在CSS中有什么作用?Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla开发人员的视频中解释了该主题。

现代恋人现代恋人Apr 12, 2025 am 10:58 AM

我喜欢这样的东西。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境