css 定位

目录

01 position定位

02 居中问题

01 position定位

定位=定位模式+边偏移

定位模式:

        1.相对定位 position: relative;

                相对定位的特性:

                        1.相对定位以元素自身的位置为基准设置位置

                        2.相对定位会占着原来的位置

        2.绝对定位 position: absolute;

                绝对定位特征:   

                                1.以父级标准移动位置 

                                        如果父级没有定位,绝对定位的盒子以我们的文档为准

                                        如果父级有定位,绝对定位以父级为准移动位置

                                2. 绝对定位不占位置

        3.子绝父相定位: 意思是父级使用相对定位 子级使用绝对定位

        4.固定定位 position: fixed;

                固定定位和父元素没有任何关系 是脱离了标准文档流的

        5.堆叠次序 z-index: 数值

                数值越大越靠上   后面不跟单位

        6.绝对定位(absolute)改变display属性

                块级元素 不给宽度 默认和父元素一样宽

                行内元素设置宽度不生效

                绝对定位可以转换行内元素为行内块元素(转换后 行内元素可以设置宽高)

                浮动也可以转换元素的模式.

02 居中问题

1.横向居中:

        行内 行内块 文字 在块级元素里面横向居中:

                给块级元素添加 text-align:center;

        行内 文字 行内块在行内块里面横向居中:

                给行内块添加 text-align:center;

        块级在另一个块级里面横向居中:

                给内部的块级元素加宽度(小于外部的块级元素) 同时设置margin:0 auto;

2.纵向居中:

        行内 文字在块级里面纵向居中:

                给当前的块级元素加上 line-height=当前块级元素的高度(前提是 行内和文字是单行的)

        行内块 在当前块级元素里面纵向居中：

                给当前行内块加 vertical-align:middle，给外部的块级加line-height：块级的高度

                (不一定百分百生效)

       块级元素在另一个块级里面纵向居中：

                只能通过定位 top:50%; margin-top:-自身高度的一半

3.绝对居中:

        第一种: 分开  横向居中+纵向居中 

                top:50%;margin-top:-自身高度的一半

                left:50%;margin-left:-自身宽度的一半

        第二种:

                left:0;top:0;right:0;bottom:0;

                margin:auto