定位和两种居中技巧（前端必备）

最新推荐文章于 2023-05-17 11:58:25 发布

啊作

最新推荐文章于 2023-05-17 11:58:25 发布

阅读量1.2k

点赞数

分类专栏：初学前端文章标签： html html5

本文链接：https://blog.csdn.net/weixin_43213962/article/details/105776617

版权

初学前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

定位

在页面布局流中的层布局（定位）

定位主要有四种：
1，静态定位（static）
2，相对定位（relative）
3，绝对定位（absolute）
4，固定定位（fixed）

我们依次来介绍：

1，静态定位（static）：
语法：position:static;
特点：默认，占位，没有参数。几乎用不上（如果有用话，就跟z-index搭配有点用）
2，相对定位（relative）：
语法：position:relative;
特点：相对定位不脱离文档流，在文档中原本的位置依然为其保留
偏移参考位置：元素本身在文档流内部原本的位置

        .box{
            width: 200px;
            height: 200px;
            background-color: brown;
            position: relative;
            top: 0;
            left: 200px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: royalblue;
        }

在这里插入图片描述
3，绝对定位（absolute）
语法：position:absolute;
特点：绝对定位会脱离文档流，在文档中原本的位置不保留
偏移参考位置（定位父级）：离绝对定位元素最近的一个带有position属性的祖先元素。如果不存在这样的元素，就是参考body定位。
记住：子绝父相。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 400px;
            height: 400px;
            border: 2px solid #000;
            position: relative;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: brown;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: royalblue;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box">box</div>
        <div class="box1">box1</div>
    </div>
</body>

在这里插入图片描述
4，固定定位（fixed）
语法：position:flxed;（应用于网页导航固定顶部）
特点：固定定位的元素会脱离文档流，在文档流中原本的位置不保留
偏移参考位置：浏览器可视区（即屏幕）。

定位偏移属性

left：距离参考位置左边缘偏移，正数向右偏移，负数向左偏移
right：距离参考位置右边缘偏移，正数向左偏移，负数向右偏移
top：距离参考位置上边缘偏移，正数向下偏移，负数向上偏移
bottom：距离参考位置下边缘偏移，正数向上偏移，负数向下偏移

须知：

1，left和right通常使用一个，如果同时使用left生效
2，top和bottom通常使用一个，如果同时使用top生效

配合定位实现居中技巧

方法一：父元素尺寸不需要知道，子元素尺寸需要知道。
说明：利用绝对定位，向右向上移动盒子的50%，然后再用margin-left和margin-top，移动负的盒子的宽度和高度的一半。

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 0 auto;
        }
        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: brown;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

在这里插入图片描述

方法二：父元素和子元素都不需要知道。
说明：利用绝对定位，四个方向都设置为0，然后设置margin：auto。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .parent {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #000;
        }

        .child {
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;

            width: 100px;
            height: 100px;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

在这里插入图片描述

这两种方法，兼容性好，不管页面怎么缩小，都会居中在父级盒或者屏幕的中间。

好了，今天就到这了！

奥利给

啊作

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
定位和两种居中技巧（前端必备）

定位在页面布局流中的层布局（定位）定位主要有四种：1，静态定位（static）2，相对定位（relative）3，绝对定位（absolute）4，固定定位（fixed）我们依次来介绍：1，静态定位（static）：语法：position:static;特点：默认，占位，没有参数。几乎用不上（如果有用话，就跟z-index搭配有点用）2，相对定位（relative）...
复制链接

扫一扫