一文带你了解CSS中的定位

最新推荐文章于 2023-08-06 03:20:51 发布

诺坎普的风间

最新推荐文章于 2023-08-06 03:20:51 发布

阅读量530

点赞数

分类专栏：前端只因变凤凰之路文章标签： css 前端 javascript css的定位定位 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_62588253/article/details/129775617

版权

前端只因变凤凰之路专栏收录该内容

50 篇文章 2 订阅

订阅专栏

🌟 所属专栏：前端只因变凤凰之路
🐔 作者简介：rchjr——五带信管菜只因一枚
😮 前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍CSS的定位相关知识。知识学习内容来自b站的 @黑马程序员的视频

😃1 为什么需要定位

浮动可以让多个块级盒子一行没有缝隙的排列显示，用于横向排列盒子；而定位则可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。

😃2 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式决定元素在文档中的定位方式，边偏移则决定了该元素的最终位置

🔥定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，值包括四个：

statci：静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位

🔥边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left、right4个属性。每个值的大小就是其距离父元素各对应边线的距离，单位是px。只有指定了定位模式这4个属性才有用。

😃3 静态定位static（了解）

是元素的默认定位方式，无定位的意思。

静态定位按照标准流摆放位置，它没有边偏移

😃4 相对定位relative（重要）

相对定位是元素在移动位置时，是相对于它原来的位置来说的（自恋型）

特点：它是相对自己原来的位置来移动的；原来在标准流的位置将继续占有，后面的盒子仍然以标准流的方式对待它（不会脱标，继续保留原来的位置）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            position: relative;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .box2 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

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

</html>

因此相对定位并没有脱标，它最典型的应用时给绝对应用当爹的。。。

😃5 绝对定位absolute（重要）

绝对定位是元素在移动时，是相对它的祖先元素来说的（父级，）

特点

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            right: 10px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点移动位置。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 500px;
            height: 500px;
            background-color: black;
        }

        .box {
            position: absolute;
            top: 0;
            right: 10px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box"></div>
    </div>
</body>

</html>

绝对定位不再占用原先的位置（脱标）

😃6 子绝父相的由来

子绝父相的意思就是：子级元素如果是绝对定位的话，父级元素要用相对定位。为什么呢？

子级绝对定位，不会占有位置，可以放到父盒子里的任何一个地方，不会影响其他兄弟盒子

父盒子需要加定位来限制子盒子在父盒子内的显示，并且要用相对定位防止父盒子下面的元素上来占了父盒子的位置。

注意：子绝父相并非绝对，如果父元素不需要占用位置，子绝父绝也会遇到。

😃7 案例

用子绝父相实现如下效果：在右上角添加一个hot标志

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 228px;
            height: 270px;
            background-color: #fff;
        }

        .hot {
            position: absolute;
            top: 3px;
            right: -12px;
        }

        .box h4 {
            font-size: 16px;
            font-weight: 400;
            margin: 10px 15px 0 15px;

        }

        .box p {
            font-size: 12px;
            color: #ccc;
            margin: 10px 15px 0 15px;

        }

        .box .gaoji {
            font-size: 12px;
            color: orange;
        }

        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <li class="box">
        <em>
            <img src="images/hot.png" alt="" class="hot">
        </em>
        <img src="images/pic.png" alt="">
        <h4>
            Think PHP 5.0 博客系统实战项目演练
        </h4>
        <p>
            <span class="gaoji">高级</span> · 1125人在学习
        </p>
    </li>
</body>

</html>

今天就到这里了，下一篇文章将继续讲解CSS中定位相关知识~

诺坎普的风间

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
一文带你了解CSS中的定位

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS的定位相关知识。知识学习内容来自b站的@黑马程序员的视频😃。
复制链接

扫一扫