Position属性值的相关解析

Tea-pd

于 2022-06-26 14:57:57 发布

阅读量651

点赞数 3

文章标签： java 前端 css html css3

本文链接：https://blog.csdn.net/tea_tea_/article/details/125469791

版权

前言：本人是新生小白，如有错误之处欢迎指出

position的属性值有：
1. absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位(会脱离文档流)

2. fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。(会脱离文档流)

3. relative：相对定位，是相对于其原本的位置来定位的。(不会脱离文档流)

4. static：默认值，没有定位。

5. Inherit：继承父元素的position值。

首先来看position： relative 相对定位

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

<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        div {
            height: 50px;
            width: 50px;
        }

        .div1 {
            background-color: red;
        }

        .div2 {
            background-color: green;
        }

        .div3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>

</html>

接下来我们对div2使用相对定位，增加样式position: relative;（相对定位）

top: 22px;left: 33px;

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

<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        div {
            height: 50px;
            width: 50px;
        }

        .div1 {
            background-color: red;
        }

        .div2 {
            background-color: green;
            position: relative;
            top: 22px;
            left: 33px;
        }

        .div3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>

</html>

position： absolute 绝对定位（！注意这个会脱离文档流哦）

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

<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
    #div {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            position: absolute;
            left: 110px;
            top: 110px;
        }
    </style>
</head>

<body>

    <div id="div"></div>

</body>



</html>

此时设置定位后距离顶部110px，距离左边110px

值得一提的是元素设置绝对定位后，他原本的位置会被其他元素占据，也就是所谓的脱离文档流

Tea-pd

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Position属性值的相关解析

前言：本人是新生小白，如有错误之处欢迎指出position的属性值有：1. absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位(会脱离文档流)2. fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。(会脱离文档流)3. relative：相对定位，是相对于其原本的位置来定位的。(不会脱离文档流)4. static：默认值，没有定位。5. Inherit：继承父元素的position值。首先来看position： relative
复制链接

扫一扫