css中固定定位 静态定位是什么意思？

html-css031

css中固定定位 静态定位是什么意思？,第1张

静态定位：

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top,bottom,left,right影响。

固定定位：

元素的位置相对于浏览器窗口是固定位置。

margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。  

图9中，使用margin属性布局相对定位元素。

层级关系为：

<div ——————————— position:relative不是最近的祖先定位元素，不是参照物

<div—————————-没有设置为定位元素，不是参照物

<div———————- position:relative 参照物

<div box1

<div box2 ——–position:absolutetop:50pxleft:120px

<div box3

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不支持)

你看一个例子就明白了。

<!DOCTYPE HTML>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>CSS POSITION</title>

<style type="text/css">

.wrap{position:relativeheight:800pxz-index:1}

.ps, .pf, .pr, .pa{width:80pxheight:80pxline-height:80pxtext-align:centercolor:#FFFfont-weight:600font-size:18px}

.ps{position:staticbackground-color:silver}

.pf{position:fixedbackground-color:greentop:50%left:50%}

.pr{position:relativebackground-color:redtop:30pxright:-130pxz-index:10}

.pa{position:absolutebackground-color:orangetop:60pxleft:60px}

</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>