CSS定位详解

来源：互联网发布：基督教歌曲下载软件编辑：程序博客网时间：2024/05/16 18:04

1.相对定位（relative）：

（1）不会影响元素本身的特征

（2）元素不脱离文档流，元素移动之后原始位置被保留。

（3）如果没有设置偏移量，对元素没有任何影响。

（4）提升层级，移动之后会覆盖原来的元素。

<style>div{border: 1px solid black;}#all{width: 500px;height: 500px;position: relative;}#div1,#div2{width: 100px;height: 100px;padding: 20px;margin: 20px;}#div1{background-color: red;    }#div2{background-color: green;}</style><body><div id="all"><div id="div1">div1</div><div id="div2">div2</div></div></body>

给div1的style加上“position: relative;top: 162px;”之后，div1提升层级，完全覆盖div2，且div1之前的位置依然保留。（这里是162px，因为是20*2（padding）+100（height）+20（margin）+1*2（border））

------------------------------------------------------------------------------------------------------分割线----------------------------------------------------------------------------------------------------------------------

2.绝对定位（absolute）：

（1）使元素脱离文档流，原来元素的位置不再保留。

（2）如果是内嵌元素，则支持宽高的设置，如果是块状元素，则默认内容撑开宽高。

（3）如果有定位父级则相对于父级发生偏移，没有则相对于文档流发生偏移。

（4）相对定位一般配合绝对定位使用。

（4）提升层级，移动之后会覆盖原来的元素。

#div1{background-color: red;position: absolute;left: 150px;}#div2{background-color: green;}

div1进行绝对定位之后，脱离文档流，不占据原来的位置，div2移动上去。

3.固定定位（fixed）：
与绝对定位特性基本一致，差别是始终相对于整个文档流进行定位。

4.定位层级（z-index）：

（1）基本样式：z-index:[number]，number越大，层级越高。

（2）定位元素默认后者层级高于前者。

0 0