【前端】CSS定位

最新推荐文章于 2024-08-18 14:02:12 发布

四通一达小新星

最新推荐文章于 2024-08-18 14:02:12 发布

阅读量149

点赞数

分类专栏： CSS 文章标签： html css 定位

本文链接：https://blog.csdn.net/qq_41319058/article/details/104128162

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

初级开发者，文章有不当的地方请各位大佬指点，谢谢！

1. 为什么要使用定位？

在这里插入图片描述

如果我们需要实现上面的效果，使用标准流和浮动使无法实现的。
但是定位就可以实现将盒子定在某一个位置自由的漂浮在其他盒子（包括标准流和浮动）的上面。
浮动的盒子是压不住img这样的元素的。

2. 定位的4中分类

值	语义
`static`	静态定位
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

3. 4种定位各自的特点

静态定位
（1） 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，不要定位的时候用。

（2）静态定位按照标准流特性摆放位置，它没有边偏移。

（3）静态定位在布局时我们几乎不用的
相对定位

（1）相对定位是元素相对于它原来在标准流中的位置来说的；

（2）相对于自己原来在标准流中位置来移动的；

（3）原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
相对定位示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位示例</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: #f00;
            margin: 100px;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

在这里插入图片描述

分析： 相对定位是相对于盒子原来的位置进行定位的，由于为盒子添加了margin（外边距），盒子的起始位置不再是浏览器的左上角，盒子的起始变为 (100,100) ，此时相对定位的起始位置就变成了(100,100)。

绝对定位

（1）绝对定位是元素以带有定位的父级元素来移动位置

（2）完全脱标（脱离标准流） —— 完全不占位置；

（3）父元素没有定位，则以浏览器为准定位（Document 文档）。
绝对定位示例（当父盒子没有定位但是子盒子有定位的情况）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位示例（父盒子没有定位）</title>
    <style>
        /*此示例是父盒子没有定位的情况：此时的子盒子将以浏览器为基准进行定位*/
        .father {
            width: 300px;
            height: 300px;
            margin:100px
            background-color: #f00;
        }
        .son {
         	position:absolute;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: #ff0;
        }

    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

在这里插入图片描述

绝对定位示例 （当父子盒子都有定位的情况）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位示例（父子盒子都有定位）</title>
    <style>
        /*此示例是父子盒子都是有定位的情况下，此时的子盒子会参照父盒子进行定位*/
        .father {
            width: 300px;
            height: 300px;
            background-color: #f00;
            margin: 100px;
            position: relative;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: #ff0;
            position:absolute;
            top: 100px;
            left: 100px;
        }

    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

在这里插入图片描述

绝对定位示例（父盒子没有定位，但是父盒子的父盒子和子盒子有定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位（父盒子没哟定位，但是父盒子的父盒子和子盒子有定位</title>
    <style>
        .grandFather {
            width: 500px;
            height: 500px;
            background-color: #f00;
            margin: 100px;
            position: relative;
        }

        .father {
            width: 300px;
            height: 300px;
            background-color: #0f0;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: #00f;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>

<div class="grandFather">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

分析： 绝对定位是以带有定位的父级元素来定位的，如果父级元素没有定位，则以浏览器文档为基准进行定位，其中的父元素不仅仅是上一级的父级元素，也可以是 ‘爷爷级’ 元素，如果是父级元素没有定位，但是 ‘爷爷级’ 元素又定位它则会根据**‘爷爷级’** 元素进行定位。
绝对定位注意：
（1）绝对定位的定位口诀是 子绝父相。
为什么子盒子绝对定位父盒子要使用相对定位呢？

（1）绝对定位的元素是不占据位置的，是脱离标准流的，相对定位的元素是占据位置的，会影响后面元素的显示。

（2）相对定位占据位置，按照标准流正常显示，后面的盒子按照正常显示。如果父盒子不使用相对定位而使用绝对定位，此时后面的盒子就会出现在父盒子的下方，不能按照正常显示。

（3）子盒子使用绝对定位就可以使盒子脱离标准流显示，实现一些特殊效果。
使用子绝父相实现图片上方悬浮的小按钮效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子绝父相示例</title>
    <style>
        .up {
            width: 1000px;
            height: 90px;
            position: relative;
        }

        .arr-l {
            position: absolute;
            top: 25px;
            left: 0;
            width: 40px;
            height: 40px;
            background-color: rgba(0, 0, 222, .7);
        }

        .arr-r {
            position: absolute;
            top: 25px;
            right: 0;
            width: 40px;
            height: 40px;
            background-color: rgba(0, 0, 222, .7);
        }

        .down {
            width: 1000px;
            height: 150px;
            margin: 10px 0;
            background-color: #000;
        }
    </style>
</head>
<body>
<div class="up">
    <img src="../images/img.jpg" alt="">
    <div class="arr-l"></div>
    <div class="arr-r"></div>
</div>
<div class="down"></div>
</body>
</html>

在这里插入图片描述

固定定位
（1）固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形那么固定定位就类似于正方形

（2）完全脱标 —— 完全不占位置；

（3）只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
```
  - 跟父元素没有任何关系；单独使用的
  - 不随滚动条滚动。
```
固定定位示例（固定定位与父元素没有任何关系）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位（固定定位与父盒子是没有任何关系的）</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: #ff0;
        }

        .box img {
            position: fixed;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../images/sun.jpg" alt="猴子" width="150">
    </div>
</body>
</html>

在这里插入图片描述

固定定位示例（固定定位的元素值认识浏览器的可视窗口）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位（固定定位只认浏览器的可视窗口）</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #ff0;
            margin: 100px auto;
        }

        .box img {
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../images/sun.jpg" alt="" width="150">
    </div>
</body>
</html>

在这里插入图片描述

分析： 固定定位的元素与父元素没有任何的关系，固定定位的元素其实为浏览器可视窗口。在什么位置显示主要根据边偏移确定。top bottom left right

四通一达小新星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】CSS定位

初级开发者，文章有不当的地方请各位大佬指点，谢谢！1. 为什么要使用定位？如果我们需要实现上面的效果，使用标准流和浮动使无法实现的。但是定位就可以实现将盒子定在某一个位置自由的漂浮在其他盒子（包括标准流和浮动）的上面。浮动的盒子是压不住img这样的元素的。2. 定位的4中分类值语义static静态定位relative相对定位absol...
复制链接

扫一扫

专栏目录