CSS的定位、定位的叠放次序

最新推荐文章于 2024-04-08 15:59:35 发布

qq_50636169

最新推荐文章于 2024-04-08 15:59:35 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/qq_50636169/article/details/119116337

版权

定位是将盒子定在某一个位置，也就是摆放盒子，并按照定位的方式移动盒子。定位=定位模式+边偏移
定位的模式（position):

static:静态定位
relative:相对定位
absolute:绝对定位
fixed:固定定位

边偏移：top、bottom、left、right.

1.static静态定位
默认的定位方式即无定位

选择器 {
         position: static;}

按照标准流的特性摆放盒子，没有边偏移
在布局中很少用到

2.relative相对定位
元素移动位置时相对于它原来的位置。且原来在标准流的位置继续占有，后面的盒子仍以标准流的方式排列（不脱标，继续保留原来的位置），其最典型的应用是给绝对定位当“父级”。

选择器 {
         position: relative;}

<style>
        .box1 {
            position: relative;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }
        .box2 {
            width: 100px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    
</body>

3.absolute绝对定位
元素在移动位置时相对于他的祖先元素。

选择器 {
         position: relative;}

特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器来定位

<style>
        .father {
            width: 500px;
            height: 500px;
            background-color: blue;
        }
        .son {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="father">
            <div class="son"></div>
    </div>
   
</body>

2.如果祖先元素有定位，则以最近一级有定位的祖先元素为参考移动的位置

 <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: blue;
        }
        .son {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
</div>
</body>

3.不占有原来的位置（脱标）

父绝子相
子级使用绝对定位，父级则需要相对定位，不占用空间也不会影响其他兄弟盒子。

4.fixed固定定位
让元素固定在浏览器的可视区位置，浏览器滚动时元素位置不会发生改变。

选择器 {
         position: fixed;}

固定定位特点：

以浏览器的可视窗口为参照点移动元素
与父元素没有任何关系
不随滚动条的滚动而滚动
不占有原来的位置（脱标）

5.sticky粘性定位
是相对定位与固定定位的混合

选择器 {
        position: sticky; top:/opx;
        }

    <style>
        body {
            height: 2000px;
        }
        .nav {
            position: sticky;
            top: 0;
            width: 600px;
            height: 50px;
            background-color: yellow;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
</body>

特点：

以浏览器的可视窗口作为参照点的移动元素
占有原先位置
必须添加top、right、left、buttom其中一个才有效
兼容性较差

定位的特殊性：
1.行内元素添加绝对或固定定位，可以直接设置高度和宽度
2.块级元素添加绝对或固定定位，如果不给宽度或高度，则默认大小是其内容大小
3.绝对定位或固定定位会完全压住盒子

定位的叠放次序（z-index)
控制盒子的前后次序

选择器 {
    z-index: 1;
    }

<style>
        div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .chinese {
            background-color: red;
            z-index: 1;
        }
        .math {
            background-color: yellow;
            left: 50px;
            top: 50px;
            z-index: 2;
        }
        .english {
            background-color:blue;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="chinese">语文</div>
    <div class="math">数学</div>
    <div class="english">英语</div>

数值可以是正整数、负数或0，默认值是auto，数值越大盒子越靠上
如果属性值相同，则按书写顺序后来居上
数字后面不能加单位
只有定位的盒子才有这个属性

qq_50636169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的定位、定位的叠放次序

定位是将盒子定在某一个位置，也就是摆放盒子，并按照定位的方式移动盒子。定位=定位模式+边偏移定位的模式（position):static:静态定位relative:相对定位absolute:绝对定位fixed:固定定位边偏移：top、bottom、left、right.1.static静态定位默认的定位方式即无定位选择器 { position: static;}按照标准流的特性摆放盒子，没有边偏移在布局中很少用到2.relative相对定位元素移动位置时
复制链接

扫一扫