CSS笔记(黑马程序员pink老师前端)定位

news2024/11/11 10:19:10

定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。

定位 = 定位模式 + 边偏移

定位模式	说明
static	静态定位,按标准流特性摆放,没有边偏移,很少用
relative	相对定位,相对自身原有位置移动,原有位置继续占有（不脱标）
absolute	绝对定位 ,相对祖先元素移动位置（脱标）
fixed	固定定位, 以浏览器的可视窗口为位置参照（脱标）
sticky	粘性定位，兼容性较差，IE不支持

绝对定位特点:
1．如果没有祖先元素或者祖先元素没有定位，则定位以浏览器为准。
2．如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。(脱标）

粘性定位特点：
1.以浏览器的可视窗口为位置参照，占有原先位置，是绝对定位和相对定位的混合。
2.必须添加top,bottom,left,right中的一个才有效。

子绝父相
如果子级使用绝对定位,则父级需要使用相对定位.

定位叠放次序z-index
z-index:1;
z轴高度，数值越大越靠上，可以为正数、零、负数，默认为auto。如果属性值相同，则按照书写的顺序，后来者居上。只有定位的盒子才有这个属性，数值后面不能加单位。

注意
1.加了绝对定位的盒子，不能通过margin:0 auto;来水平居中。
2.脱标的盒子（浮动元素、绝对定位、固定定位）不会触发外边距合并。
3.浮动元素会压住下方标准流的盒子，但不会压住盒子里的文字或图片。绝对定位、固定定位的盒子会压住下方的所有内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div1 {
            margin: 10px auto;
            height: 3000px;
            width: 600px;
            background-color: pink;
            line-height: 30px;
        }


        .father {
            /* 父相,相对原有位置下降30px,即这里设置的行高大小,原有位置
            继续占有,下一个p标签显示在这个div的下方 */
            position: relative;
            top: 30px;


            background-color: skyblue;
            height: 300px;
        }

        .son {
            /* 子绝,不占有原有位置,下方文字向上对齐,子级盒子覆盖部分文字 */
            position: absolute;
            top: 0px;
            left: 200px;


            background-color: aquamarine;
            width: 100px;
            height: 100px;
        }

        .div1 p {
            /* p标签在其原有位置正好被father块完全覆盖,设置20px的上margin,使得文字显示了2/3  */
            margin-top: 20px;
            background-color: skyblue;
        }

        .div2 {
            position: fixed;
            bottom: 20px;
            right: 20px;

            height: 100px;
            width: 100px;
            background-color: aquamarine;

        }

        .div3 {
            /* 固定在版心旁的盒子 */
            position: fixed;
            top: 30px;
            /*1.走浏览器宽度的一半  */
            right: 50%;
            /* 2.利用margin,走版心的一半+空隙 */
            margin-right: 310px;


            height: 100px;
            width: 50px;
            background-color: aquamarine;

        }
    </style>
</head>

<body>
    <div class="div1">
        版心盒子
        <div class="father">
            <div class="son">
                绝对定位的子级盒子
            </div>
            版心里的相对定位父级盒子<br>
            ................................................................
            ..................................................................


        </div>
        <p>父级盒子后面的块元素</p>
    </div>

    <div class="div2">
        相对浏览器可视窗口固定的盒子
    </div>
    <div class="div3">
        相对版心固定的盒子
    </div>
</body>

</html>