doctype html
>
<
html
lang
="zh-cn"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>css position
title
>
<
style
type
="text/css"
>
.wrap
.ps, .pf, .pr, .pa
.ps.pf
.pr.pa
style
>
head
>
<
body
>
<
div
class
="wrap"
>
<
div
class
="ps"
>static
div>
<
div
class
="pf"
>fixed
div>
<
div
class
="pr"
>relative
div>
<
div
class
="pa"
>absolute
div>
div>
body
>
html
>
static:預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
relative:相對於其正常位置進行定位。因此，"left:20" 會向元素的 left 位置新增 20 畫素。
fixed:相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
absolute:生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
css position:static:預設屬性，靜態定位
relative:相對定位，相對于父元素的定位，需要配合top,left,right,bottom,z-index等屬性
absolute:絕對定位，相對于父元素的定位，需要配合top,left,right,bottom,z-index等屬性
fixed:固定定位，相對于父元素的定位，需要配合top,left,right,bottom,z-index等屬性(ie6不支援)
通過修改.wrap 修改父元素的位置，看到static、relative、absolute 是相對父親元素位置的改變而發生偏移
css元素定位和布局
一 定位 模型和定位是密不可分的，就像買了家具，要找地方放家具一樣，要不然沒地方放，放到人家家裡面，是沒有意義的。下面就介紹一下定位的屬性 position 定義元素在頁面的定位方式 left 指定元素和最近乙個具有定位設定的父物件左邊的距離 right 指定元素和最近乙個具有定位設定的父物件右邊的...
CSS定位布局
絕對定位 如果想為元素設定層模型中的絕對定位，需要設定position absolute 表示絕對定位 這條語句的作用將元素從文件流中拖出來，然後使用left right top bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即...
css布局 定位
1 為什麼需要定位？某個元素可以自由的在乙個盒子內移動位置，並且壓住其他盒子 滾動視窗時，盒子固定在某個位置 2 應用 下拉列表 模態框 web應用程式的一些基本效果 3 本質 將元素徹底從文件流中移走。允許將元素放在螢幕的任意位 置，還可以將乙個元素放到另乙個元素的前面或者後面，彼此重疊。按照定位...