CSS 定位属性详细解说

最新推荐文章于 2023-02-09 13:35:30 发布

春疯得意

最新推荐文章于 2023-02-09 13:35:30 发布

阅读量183

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zj1206358260/article/details/82085377

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

定位元素：position，使HTML标签元素变成为定位元素

定位元素默认后者层级大于前者

测试方式：将 .box1 添加绝对定位 absolute ，将 .box2 添加相对定位 relative

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>相对定位</title>
        <style>
            .box1{
                width:100px;
                height:100px;
                background:blue;
                position:absolute;
            }
            .box2{
                width:100px;
                height:100px;
                background:purple;
                position:relative;
            }
            .box3{
                width:100px;
                height:100px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
<html>

这里写图片描述
可以发现添加相对定位的 .box2（紫色块）展现在页面上，而添加绝对定位的 .box1（蓝色块）被紫色块所遮盖，说明紫色块的层级更高

相对定位 position:relative

1.不影响元素本身的特性

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>相对定位</title>
        <style>
            .box1{
                width:100px;
                height:100px;
                background:blue;
            }
            .box2{
                width:100px;
                height:100px;
                background:purple;
                position:relative;
            }
            .box3{
                width:100px;
                height:100px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
<html>

这里写图片描述
box2方块添加 position:relative 之后元素本身并不发生任何变化

2.不使元素脱离文档流

测试方式：将 .box2 的标签<div>改为内嵌标签 <span>，观察 .box2 方块的变化

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>相对定位</title>
        <style>
            .box1{
                width:100px;
                height:100px;
                background:blue;
            }
            .box2{
                width:100px;
                height:100px;
                background:purple;
                position:relative;
            }
            .box3{
                width:100px;
                height:100px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <span class="box2"></span>
        <div class="box3"></div>
    </body>
<html>

这里写图片描述
可以发现 .box2 的内嵌标签元素<span>不支持宽高

3.如果没有添加定位偏移量，对元素本身没有任何影响

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>相对定位</title>
        <style>
            .box1{
                width:100px;
                height:100px;
                background:blue;
            }
            .box2{
                width:100px;
                height:100px;
                background:purple;
                position:relative;
                top:-20px;
                left:-10px;
            }
            .box3{
                width:100px;
                height:100px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <span class="box2"></span>
        <div class="box3"></div>
    </body>
<html>

这里写图片描述

绝对定位 position:absolute

1. 绝对定位是相对于整个文档发生定位偏移

<!DOCTYPE HTML>
<html>
    <!-- html 注释 -->
    <head>
        <title>绝对定位</title>
        <meta charset="utf-8" />
        <style>
            body{border:1px solid black}
            .box1{width:100px;height:100px;background:red;position:absolute;top:0;left:0;}
            .box2{width:200px;height:200px;background:blue;}
            .box3{width:300px;height:300px;background:green;}
            /*
                position:absolute; 绝对定位  相对于整个文档发生定位偏移
            */
        </style>
    </head>
    <body>
        <div class="box3">
            <div class="box2">
                <div class="box1"></div>
            </div>
        </div>
    </body>
</html>

这里写图片描述
对小红块添加绝对定位，距离顶部为0px，距离左部0px，小红块发生了位置偏移，出现在了浏览器左上角

<!DOCTYPE HTML>
<html>
    <!-- html 注释 -->
    <head>
        <title>绝对定位</title>
        <meta charset="utf-8" />
        <style>
            body{border:1px solid black}
            .box1{width:100px;height:100px;background:red;position:absolute;bottom:0;right:0;}
            .box2{width:200px;height:200px;background:blue;}
            .box3{width:300px;height:300px;background:green;}
            /*
                position:absolute; 绝对定位  相对于整个文档发生定位偏移
            */
        </style>
    </head>
    <body>
        <div class="box3">
            <div class="box2">
                <div class="box1"></div>
            </div>
        </div>
    </body>
</html>

这里写图片描述
对小红块添加绝对定位，距离低部为0px，距离右部0px，小红块发生了位置偏移，出现在了浏览器右下角

2. 使标签元素完全脱离文档流

<!DOCTYPE HTML>
<html>
    <!-- html 注释 -->
    <head>
        <title>绝对定位</title>
        <meta charset="utf-8" />
        <style>
            body{border:1px solid black}
            .box1{width:100px;height:100px;background:red;position:absolute;}
            .box2{width:200px;height:200px;background:blue;}
            .box3{width:100px;height:100px;background:green;}
            /*
                使元素完全脱离文档流
            */
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

这里写图片描述
当给小红块加上绝对定位时，小蓝块发生向上偏移。说明小红块脱离了文档流

3. 使内嵌元素支持宽高

<!DOCTYPE HTML>
<html>
    <!-- html 注释 -->
    <head>
        <title>绝对定位</title>
        <meta charset="utf-8" />
        <style>
            body{border:1px solid black}
            .box1{width:100px;height:100px;background:red;position:absolute;}
            .box2{width:200px;height:200px;background:blue;}
            .box3{width:100px;height:100px;background:green;}
            /*
                使内嵌元素支持宽高
            */
        </style>
    </head>
    <body>
        <span class="box1"></span>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

这里写图片描述
当将小红块的 div 块标签元素该换为 span 内嵌标签时，小红块一样有宽度和高度，没有发生改变。

4. 块属性标签由内容撑开宽度

<!DOCTYPE HTML>
<html>
    <!-- html 注释 -->
    <head>
        <title>绝对定位</title>
        <meta charset="utf-8" />
        <style>
            body{border:1px solid black}
            .box1{background:red;position:absolute;}
            .box2{width:200px;height:200px;background:blue;}
            .box3{width:100px;height:100px;background:green;}
            /*
                块属性标签由内容撑开宽度
            */
        </style>
    </head>
    <body>
        <div class="box1">内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
        容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容
        </div>

        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

这里写图片描述
将小红块的宽度和高度去掉，在小红块内添加内容可以发现小红快由内容撑开了宽度和高度

5.绝对定位如果有定位父级，则相对于定位父级发生偏移

测试方式，三个<div>方块子父级嵌套，将最外层的<div>加上相对定位，最内层的<div>加上绝对定位，并设置定位偏移量right:0;bottom:0;

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>相对定位</title>
        <style>
            /*
            绝对定位如果有定位父级，则相对于定位父级发生偏移
            */
            .box1{
                width:300px;
                height:300px;
                background:blue;
                position:relative;
            }
            .box2{
                width:200px;
                height:200px;
                background:purple;

            }
            .box3{
                width:100px;
                height:100px;
                background:yellow;
                position:absolute;
                right:0;
                bottom:0;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
                <div class="box3"></div>
            </div>
        </div>
    </body>
</html>