CSS定位

CSS定位

定位的应用场景

1 解决盒子之间的层叠(叠加)问题,可以层叠到其它盒子上面

2 页面滚动,盒子固定在页面某个位置不动.

定的使用步骤:

1 设置定位的方式

2 设置偏移值

定位的语法

.blue {
            /* 定位的使用步骤 */
            /* 1 设置定位的方式  绝对定位*/
            position: absolute;
            /* 2 设置偏移值 */
            top: 150px;
            left: 150px;
            background-color: blue;
        }

静态定位

 position: static;
特点:
1 静态定位就是普通的标准流
2 静态定位设置偏移值无效.

相对定位

 position: relative;
特点:
1 需要配合方位属性来移动位置
2 想对于自身原来的位置进行移动
3 在页面中占位置-没有脱标

绝对定位

position: absolute;
特点
1 需要配合方位属性来移动位置
2 祖先元素如果没有定位,默认相对于浏览器进行移动;祖先元素有定位,相对于最近一级带有定位的祖先元素移动位置.
3 在页面中不占位置-已经脱标

子绝父相

子绝父相:

子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.

子绝父绝:

实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可.

绝对定位的盒子水平垂直居中

普通做法:

/* 1 让子盒子移动父元素的一半(往右) */

​ left: 50%;

​ /*让子盒子移动父元素的一半(往下) */

​ top: 50%;

​ /* 2 在让子盒子往左移动自身宽度的一半 使用margin负值 */

​ /* 普通做法 */

​ margin-left: -150px;

​ /* 在让子盒子往上移动自身高度的一半 使用margin负值 */

​ margin-top: -100px;

优化做法:

​ /* 1 让子盒子移动父元素的一半(往右) */

​ left: 50%;

​ /*让子盒子移动父元素的一半(往下) */

​ top: 50%;

​ /* 2 在让子盒子往左移动自身宽度的一半 使用margin负值 */

​ /* 优化做法 就业班第一天课会讲 */

​ transform: translate(-50%, -50%);

固定定位

position: fixed;
特点
 1 需要配合方位属性来移动位置
 2 相对于浏览器的可视区域进行移动位置
 3 不占位置-脱标

定位的特殊性

行内元素加了绝对/固定定位可以设置宽高

块级元素加了绝对/固定定位,如果不给宽度,宽度由内容撑开

嵌套块级元素加了绝对/固定定位,不会有塌陷问题.

元素层级

不同布局方式元素的层级关系：

标准流 <浮动 <定位

定位元素之间的层级关系相同(相对定位 绝对定位 固定定位)

z-index属性可以修改定位元素之间的层级关系

z-index: 数字(默认值是auto );

z-index属性的属性值千万不要加单位

数字越大,层级越高.只有定位的盒子才有 z-index属性

代码:

<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 300px;
            height: 300px;

        }

        .red {
            /* 相对定位 */
            position: relative;
            left: 0;
            top: 0;
            z-index: 2;
            background-color: red;
        }

        .blue {
            /* 绝对定位 */
            position: absolute;
            left: 100px;
            top: 100px;
            z-index: 1;
            background-color: blue;

        }

        .green {
            /* 固定定位 */
            position: fixed;
            left: 200px;
            top: 200px;
            z-index: 9999;
            background-color: green;
        }