css中的定位最详细

最新推荐文章于 2024-05-18 21:20:55 发布

Faith_gyz

最新推荐文章于 2024-05-18 21:20:55 发布

阅读量225

点赞数

分类专栏： Css 文章标签： css html

本文链接：https://blog.csdn.net/qq_43667537/article/details/109449259

版权

Css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、为什莫需要定位

在这里插入图片描述

二、定位的组成

在这里插入图片描述

三、静态定位static

在这里插入图片描述
静态定位就相当于标准流，具有标准流的全部特性。

四、相对定位

在这里插入图片描述

相对定位，走了之后位置还会保留，可以理解为：人走了，钱还在。

在这里插入图片描述

五、绝对定位

在这里插入图片描述
绝对定位会飘的比浮动还要高，不占有位置 可惜可叹，人死了，钱也没了。

六、子绝父相

在这里插入图片描述

七、固定定位

在这里插入图片描述

<!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>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            /* 盒子居中对齐 */
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            bottom: 15px;
            /* 1.走浏览器宽度的一半 */
            left: 50%;
            /* 2.利用margin 走版心盒子宽度的一半距离 */
            margin-left: 405px;
            width: 50px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>
</html>

在这里插入图片描述

八、粘性定位sticky（了解）

在这里插入图片描述

<!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>
        body {
            height: 3000px;
        }
        .box {
            position: sticky;
            top: 10px;
            margin: 100px auto;
            width: 50px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

九、定位总结

在这里插入图片描述

十、定位堆叠顺序

在这里插入图片描述

<!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>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .xiongda {
            background-color: red;
            /* 定位层叠优先级 */
            z-index: 1;

        }
        .xionger {
            background-color: green;
            left: 50px;
            top: 50px;

        }
        .qiangge {
            background-color: blue;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class=" box xiongda"></div>
    <div class=" box xionger"></div>
    <div class=" box qiangge"></div>
</body> box 
</html>

在这里插入图片描述

十一、绝对定位的盒子居中

当然固定定位盒子居中也是如此啦
在这里插入图片描述

<!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>
        .box {
            position: absolute;
            /* 1.left 走 50% 父容器宽度的一半 */
            left: 50%;
            /* 2.margin 负值 往左走  自己盒子宽度的一半 */
            margin-left: -100px;
            /* 这里水平居中,跟上面的方法一样 */
            top: 50%;
            margin-top: -100px;
            
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: auto;没用 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

十二、定位的特殊特性

在这里插入图片描述

Faith_gyz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中的定位最详细

一、为什莫需要定位二、定位的组成三、静态定位static静态定位就相当于标准流，具有标准流的全部特性。四、相对定位相对定位，走了之后位置还会保留，可以理解为：人走了，钱还在。五、绝对定位绝对定位会飘的比浮动还要高，不占有位置可惜可叹，人死了，钱也没了。六、子绝父相七、固定定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫