CSS笔记（六） 相对定位、绝对定位、固定定位

1、定位：position

 

　　（注：浮动float浮动页面上、定位position固定于一个位置上。）

 

定位包括定位属性模式和边偏移两部分

（1）定位模式：选择器{ position：属性值}；

                   属性值：static默---唯一用处是取消定位

                                 relative相对定位

                                 absolute绝对定位

                                 fixed固定定位

（2）边偏移：top、left、right、bottom

 

 

 

2、相对定位：relative

     相对于原来位置进行偏移，以自己的左上角为基点移动，移动幅度又left、right、top、bottom属性来确定，原本占据的空间任然保留。

 

 

3、绝对定位：absolute

     相对于父容器进行位置定位，父元素必须是有定位（即非static）的容器。如果没有父元素，或者父元素没有定位会以当前屏幕对齐。父级有定位，会根据最近的已经定位（绝对、相对或固定）的父元素进行定位。

     元素框从文档流中完全删除，原先的位置会关闭。（和float类似）

     注：只有绝对定位是完整意义的脱标，float里面的内容并不会和背景一起浮动上去

 

 

子绝父相：子级是绝对定位的话，父级要用相对定位

 

（1）绝对定位产生的问题：绝对定位的盒子如何水平/垂直居中对齐

        用position定位过后的盒子，margin:0 auto;会失效，不能居中对齐了。

        所以：首先left：50%，跑到父盒子一半那；然后自己外边距负的一半值margin-left即可。

 

 　　   {  width：200px;

     　　   height：200px；

     　　   position：absolute；

    　　    // 水平：

   　　     left：50%；

    　　    margin-left：-100px；

    　　    //垂直：

   　　     top: 50%;

   　　     margin-top：-100px；

      　　  }

 

 

4、3个定位的例子：哈根达斯图片、顺丰导航栏、淘宝轮播图片

 

 

5、固定定位：fixed

      脱离文档流，不占据位置，位置以浏览器进行定位，无关父级。

 

 

6、以上定位之后的特性----定位模式转换

　　（行内元素无法直接给宽高，要先转变成行内块元素，display:block;inline-block;/position:relative;absolute;fixed/float:left;right）

　　（行内元素的高度和宽度和内容有关，背景图片在盒子底下，无法撑开，要给宽）

 

　　和浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，换为行内模式，因此，如果行内元素添加了绝对定位或者固定定位浮动之后，可以不用转换模式，直接宽高。

 

　　如果是一个背景图片，添加了固定定位，有了行内模式之后，要给width的值才会显示。

 

 

7、叠放次序：z-index

        调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，取值正负整数、0。

        无单位，和font-weight一样。

       （只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位都无）

     

 

8、一个例子

        如果并列的几个盒子hover的时候border显示，因为隔壁的左右border重叠，hover有些盒子只有三边，在hover属性中添加position：relative;即可。