DIV绝对定位和相对定位使用秘笈

开发 前端
DIV绝对定位使你能精确地定位要素在页面的独立位置,而不考虑页面其它要素的定位设置,而DIV相对定位指你所定位的要素的位置相对于在文件中所分配的位置。

本文向大家介绍一下DIV相对定位和绝对定位的用法,其中相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。

DIV绝对定位和相对定位

绝对定位:

  定位属性将是网虫们打开幸福之门的钥匙:H4{position:absolute;left:100px;top:43px}
  这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口。

  左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离。设定这些距离时,你可以使用所学过的各种度单位或比例值。使用比例值时,比例值的是相对于母体要素的尺寸。
  你可以定位什么呢?任何东西!段落、单词、GIF和JPEG图像、QUICKTIME电影等等。

相对定位:

  绝对定位使你能精确地定位要素在页面的独立位置,而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例:
  I{position:relative;left:40px;top:10px}

  相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间,定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位,则文字的显示位置将恢复正常。使用相对定位时要小心,否则容易将页面弄得非常乱。

  除了相对定位和绝对定位,你还可以使用static(静止)参数值。Static是position特性的缺省值。它的使用方法同普通HTML中的定位方法,不能附加特殊的定位设置。也就是说,除了边距特性,或通过使用float特性来浮动单元可影响单元的定位外,其它均不可以。

【编辑推荐】

  1. 学习笔记 DIV定位用法详解
  2. CSS中margin边界叠加问题及解决方案
  3. CSS样式表高效使用八大秘诀
  4. 剖析CSS relative相对定位用法
  5. 实现CSS垂直居中的五大方法及优缺点
责任编辑:佚名 来源: baike.baidu.com
相关推荐

2010-08-16 11:28:02

DIV

2010-09-10 12:40:06

CSS相对定位CSS绝对定位

2010-09-14 16:39:26

CSS DIV相对定位CSS DIV绝对定位

2010-08-17 11:10:16

DIV+CSS

2010-09-06 11:17:19

CSS相对定位CSS绝对定位

2010-08-16 08:54:48

DIVCSS

2010-09-10 11:32:23

CSS绝对定位CSS相对定位

2010-09-10 13:07:51

CSS DIV绝对定位CSS DIV固定定位

2010-09-14 16:57:29

DIV绝对定位CSS

2010-09-01 14:02:27

绝对定位浮动CSS

2010-09-14 17:20:03

CSS DIV相对定位

2009-12-29 10:06:09

WPF Canvas

2023-11-24 09:41:41

组件布局鸿蒙

2010-08-25 14:56:15

CSS相对定位

2011-05-25 08:40:54

HTML

2010-08-26 16:40:35

DIV定位

2010-08-25 14:45:57

CSS绝对定位

2013-02-19 10:24:47

瀑布流布局CSS

2010-09-14 16:20:19

DIV定位

2010-09-07 13:45:53

<div>标签
点赞
收藏

51CTO技术栈公众号