前端开发学习——CSS定位

标签：定位盒子父级 top 50% position 前端开发 CSS

一、定位的基本介绍

1、网页常见的布局方式

1.标准流

块级元素独占一行——垂直布局
行内元素/行内块元素一行显示多个——水平布局

2.浮动

可以让原本垂直布局的块级元素变成水平布局

3.定位

可以让元素自由的摆放在网页的任意位置
一般用于盒子之间的层叠情况

2、定位的常见应用场景

可以解决盒子与盒子之间的层叠问题（定位之后的元素层级最高，可以层叠在其他盒子的上面）
可以让盒子始终固定在屏幕的某个位置

二、定位的基本使用

1、使用定位的步骤

1.设置定位方式

属性名：position
常用属性值：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

2.设置偏移量

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

三、静态定位

介绍：静态定位即标准流

代码：position:static;

特点：写上代码与不写无异

四、相对定位

介绍：自恋型定位，相对于自己之前位置进行移动

代码：position:relative;

特点：

需要配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置——没有脱标

应用场景：

配合绝对定位组CP（子绝父相）
用于小范围的移动

 /* 相对定位 */
position: relative;
left: 100px;
top: 200px;
/* 如果left和right都有，以left为准，垂直方向以top为准 */
right: 200px;
bottom: 400px;
/* 1.占有原来的位置 (不脱标)
2.仍然具有标签原有的显示特点
3.改变位置参考自己原来的位置 */

五、绝对定位

1、定位介绍

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

代码：position:absolute;

特点：

需配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置——脱标

应用场景

配合绝对定位组CP（子绝父相）

 /* 绝对定位
先找已经定位的父级，如果由这样的父级就以这个父级为参照物进行定位
有父级，但父级没有定位，以浏览器窗口为参照物进行定位 */
position: absolute;
left: 0;
top: 0;
/* 1.脱标，不占位
2.改变标签的显示模式特点：在一行共存，宽高生效 */

2、子绝父相

    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son {
            /* 相对，绝对 */
            /* 父级相对定位，自己绝对定位——子绝父相 */
            
            position: relative;
            right: 100px;

            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .sun {
            position: absolute;
            right: 20px;
            top: 30px;

            width: 200px;
            height: 200px;
            background-color: green;
        }
 /* 绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口定位 */

3、子绝父相—居中

需求：使用子绝父相，让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）

使盒子在浏览器中位置居中的css代码如下：

            /* 1.绝对定位的盒子不能使用左右margin auto居中 */
            position: absolute;
            /* margin: 0 auto; */

            /* left：50% 使盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* 让盒子往左移盒子宽度一半的距离 */
            /* 因为浏览器宽高都没有范围，margin-right取值为多少都不会使盒子向右移 */
            margin-left: -200px;
            top: 50%;
            margin-top: -200px;

            width: 400px;
            height: 400px;
            background-color: pink;

4、位移居中

需求：如果盒子的宽高度为奇数，则上述方法无法使其完全居中。

代码：transform: translate(-50%,50%);

            position: absolute;
            left: 50%;
            top: 50%;
            /* 位移：自己宽度高度的一半 */
            transform: translate(-50%,50%);
            
            width: 301px;
            height: 300px;
            background-color: pink;

六、固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动

代码：position:fixed;

特点：

需配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置—脱标