前端学习12 | 定位及其属性

最新推荐文章于 2024-02-08 14:24:01 发布

printfbaozw

最新推荐文章于 2024-02-08 14:24:01 发布

阅读量279

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/printfbaozw/article/details/129321748

版权

文章目录

前言
一、定位属性与属性值
二、使用效果
总结

前言

position，让元素显示在某位置中。

一、定位属性与属性值

position: static;默认值
position: absolute;绝对定位
position: relative;相对定位
position: fixed;固定定位
position: sticky;粘性定位（兼容性不好）

以上属性值都需要配合top、left、right、bottom来应用。

二、使用效果

1.relative相对定位

我们先在vscode中写入以下代码，可以看到我们在box2中加入了position元素，并定义了top、left值，我们可以看到运行结果：

<!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>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background:red;
        }
        .box2{
            background: blueviolet;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .box3{
            background: blue;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

运行结果为（箭头为后加）：

在这里插入图片描述
我们可以看到紫色色块相对于左侧，上侧各偏移了100px，可以用负数。

2.absolute绝对定位

我们将上述代码的position属性值改为absolute，运行之后，我们可以看到：
在这里插入图片描述
当box2采用了绝对定位时，他所拥有的空间会被腾出，给下一个box。
当两个或多个盒子嵌套时，我们需要给外面的盒子做相对定位，子盒子做绝对定位，这样才能达到我们的效果。

3. fixed固定定位

我们修改style部分代码，如下所示：

	<style>
        .box1{
            width: 100%;
            height: 1500px;
            background:red;
        }
        .ad{
            width: 100px;
            height: 200px;
            background-color: aqua;
            position: fixed;
            right: 0;
            bottom: 200px;
        }
    </style>

运行后查看结果：
在这里插入图片描述
拖动滚动条，我们的ad部分是可以跟随滚动的。

4. sticky粘性定位

我们按照以下代码来举例说明：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .head{
            width: 100%;
            height: 100px;
            background:red;
        }
        .nav{
            width: 500px;
            height: 50px;
            background-color: aqua;
            margin: 0 auto;
            position: sticky;
            top: 50px;
        }
        .body{
            height: 5000px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="nav"></div>
    <div class="body"></div>
</body>
</html>