CSS Position属性详解：相对与绝对定位及Z-Index应用.pdfVIP

CSSposition属性

Position属性用来改变页面当中元素的位置关系

值:

1、fixed固定定位

位置固定在窗口某个位置，不管滚动条如何拖动，都不动

leftright水平方向位置

topbottom竖直方向的位置

2、relative相对定位

改变元素的位置，但是还是暂着其原来的位置不会变

3、absolute绝对定位

以相对定位元素，为参考，改变位置，但是不占局原来的位置

4、z-index层的位置关系

CSS相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或

水平位置，让这个元素“相对于”它的起点进行移动。

元素的位置通过left,top,right以及bottom属性进行规定。

CSS绝对定位

位置可以任意的改变，并且不占空间，相当于悬浮在当前块的上面

元素的位置通过left,top,right以及bottom属性进行规定。

CSS绝对定位

1、绝对定位元素一定是和相对定位元素一起

2、如果没定位元素，则相对于body窗口定位

3、绝对定位的元素一定要在相对定位的元素的里面

4、绝对定位的元素的位置相对于的已定位祖先元素

案例:

z-index层的位置关系

Z-index可以调换两个层的位置关系

值:值可以为正，也可以为负，值越大，越在上面

正值:z-index:3;

负值：z-index:-1;

z-index:0;

值可以为正，也可以为负，值越大，越在上面

z-index:相对和绝对定们的元素有效果

用到最多的就是悬浮导航

网页制作第五期课程

：