html选择定位位置,CSS中HTML元素定位Position参数可选值详解

Position参数我们都知道是用来定位的，今天我就为各位介绍一下CSS中HTML元素定位Position参数可选值详解，希望对各位有帮助。

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

默认值： static

语法： position : static | absolute | fixed | relative

继承性： no

版本： CSS2

JavaScript 语法： object.style.position=”absolute”

static

元素的box模型其位置预设为静态(static)即隐含宣告了position:static

此时若有宣告 top, right, bottom, left 等属性视为无效，因static的意思就是固定了位置。

此元素位于其它元素之后或之前，端视原始文件中的元素出现先后顺序，或说 此元素的位置位于正常的文件流程之中(normal flow of the document)不因 top, right, bottom, left 等属性而改变其位置，故称之为static。

absolute

元素的box模型其位置若为绝对(absolute)即确实宣告了position:absolute

此时若有宣告 top, right, bottom, left 等偏移(offset)属性则会以父元素的边界位置为基点，再作对应的距离调整。

此时所说的父元素指的是前一个以absolute或relative宣告其位置的元素，若之前都没有此定位的元素存在，则以元素所在的视窗最大可视范围边界为基点。

设定为absolute的元素会不存在于正常文件流程的位置，也可能会覆盖其它元素。

若确实宣告了position:absolute 但没有宣告 top, right, bottom, left 等属性，则显示会在原来文件流程中的位置，但因不存在于正常文件流程中，所以会覆盖后一个元素的显示。

relative

元素的box模型其位置若为相对(relative)即确实宣告了position:relative

此时若有宣告 top, right, bottom, left 等偏移(offset)属性则会以元素本身在正常的文件流程之位置为基点，再作对应的距离调整。

设定为relative的元素在正常文件流程的位置会被「保留」『空』下来，但此元素会遵从top, right, bottom, left 等属性的指示偏移到指定的位置上，也可能会覆盖其它元素。

若确实宣告了position:relative 但没有宣告 top, right, bottom, left 等属性，则显示位置会停留在原先自身的保留位置上。

fixed

元素的box模型其位置若为固定(fixed)即确实宣告了position:fixed

此时若有宣告 top, right, bottom, left 等偏移(offset)属性则会以元素所在的视窗最大可视范围边界为基点，再作对应的距离调整。

设定为fixed的元素会不存在于正常文件流程的位置，也可能会覆盖其它元素。

若确实宣告了position:fixed 但没有宣告 top, right, bottom, left 等属性，则显示会在原来文件流程中的位置，但因不存在于正常文件流程中，所以会覆盖后一个元素的显示。

例子

CSS中HTML元素定位Position参数可选值详解

元素(element)的定位(position)

static

• 元素的box模型其位置???殪o?B(static)即?含宣告了position:static
• 此?r若有宣告 top, right, bottom, left 等?傩砸???o效，因static的意思就是固定了位置。
• 此元素位於其它元素之後或之前，端?原始文件中的元素出?先後?序，或? 此元素的位置位於正常的文件流程之中(normal flow

  of the document)不因 top, right, bottom, left 等?傩远?淖?其位置，故?之??tatic。

absolute

• 元素的box模型其位置若?榻^??absolute)即???宣告了position:absolute
• 此?r若有宣告 top, right, bottom, left 等偏移(offset)?傩?t??愿冈?氐倪?界位置?榛?c，再作???木嚯x?整。
• 此?r所?的父元素指的是前一??以absolute或relative宣告其位置的元素，若之前都?]有此定位的元素存在，?t以元素所在的?窗最大可?????界?榛?c。
• ?定??bsolute的元素??淮嬖陟墩?Ｎ募?鞒痰奈恢茫?部赡??采w其它元素。
• 若???宣告了position:absolute 但?]有宣告 top, right, bottom, left 等?傩裕?t?示??谠?砦募?鞒讨械奈恢茫??虿淮嬖陟墩?Ｎ募?鞒讨校????采w後一??元素的?示。

relative

• 元素的box模型其位置若?橄??relative)即???宣告了position:relative
• 此?r若有宣告 top, right, bottom, left 等偏移(offset)?傩?t??栽?乇旧碓谡?５奈募?鞒讨?恢?榛?c，再作???木嚯x?整。
• ?定??elative的元素在正常文件流程的位置??弧副Ａ簟埂嚎铡幌?恚??嗽?????op, right, bottom, left 等?傩缘闹甘酒?频街付ǖ奈恢蒙希?部赡??采w其它元素。
• 若???宣告了position:relative 但?]有宣告 top, right, bottom, left 等?傩裕?t?示位置??Ａ粼谠?茸陨淼谋Ａ粑恢蒙稀?lt;/li>

fixed

• 元素的box模型其位置若?楣潭?fixed)即???宣告了position:fixed
• 此?r若有宣告 top, right, bottom, left 等偏移(offset)?傩?t??栽?厮?诘囊?窗最大可?????界?榛?c，再作???木嚯x?整。
• ?定??ixed的元素??淮嬖陟墩?Ｎ募?鞒痰奈恢茫?部赡??采w其它元素。
• 若???宣告了position:fixed 但?]有宣告 top, right, bottom, left 等?傩裕?t?示??谠?砦募?鞒讨械奈恢茫??虿淮嬖陟墩?Ｎ募?鞒讨校????采w後一??元素的?示。

有?追N移?釉?匚恢玫姆椒??lt;/dt>

• 利用box模型的??界移?釉?匚恢谩?lt;/li>
• 利用float?傩愿?釉?匚恢谩?lt;/li>
• 利用position移?釉?匚恢谩?lt;/li>

所有元素皆???300px, 高100px

---

此 box1 元素的左偏移?傩?00px, 上偏移?傩?00px, 定位??tatic

此 box2 元素的左偏移?傩?50px, 上偏移?傩?50px, 定位??bsolute

此 box3 元素的左偏移?傩?00px, 上偏移?傩?00px, 定位??elative

此 box4 元素的左偏移?傩?50px, 上偏移?傩?50px, 定位??ixed

---

所有元素皆???300px, 高100px