CSS 一文搞懂定位

最新推荐文章于 2025-04-16 15:07:35 发布

LaughingHe

最新推荐文章于 2025-04-16 15:07:35 发布

阅读量215

点赞数

分类专栏： web 文章标签： html5 css javascript

本文链接：https://blog.youkuaiyun.com/qq_36050563/article/details/109390528

版权

web 专栏收录该内容

8 篇文章

订阅专栏

CSS 一文搞懂定位

1.定位的种类

CSS中定位有四种

属性名	属性值	作用
position	static	默认的定位
position	relative	相对定位
position	absolute	绝对定位
position	fixed	固定定位

static默认的定位不作讲解，块级元素逐行排列，行内元素一次排列。

2.relative相对定位

使用相对定位的元素回去找第一个使用定位的父元素，且使用了相对定位的元素原来的控件还占据。

在这里插入图片描述

如果我对最外层的div设置属性position:relative，给div2设置position: relative;left: 100px;top: 100px;按理说div3会跑到div2的位置，但是结果不是的。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1{
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
            position: relative;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            left: 100px;
            top: 100px;
        }
        .div3{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2">
        div2
    </div>
    <div class="div3">
        div3
    </div>
</div>
</body>
</html>

3.absolute绝对定位

绝对定位和相对定位刚好相反，使用了绝对定位的元素回去找到第一个使用定位的的父元素，且不占位置。有点像浮动

在这里插入图片描述

还是上面的例子，div2使用了绝对定位后，div3就会跑上去。常说的“子绝父相”就是说的这个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1{
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
            position: relative;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .div3{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2">
        div2
    </div>
    <div class="div3">
        div3
    </div>
</div>
</body>
</html>

4.fixed固定定位

固定定位有一种特定的应用场景固定导航栏
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            margin: 0 auto;
            width: 1200px;
        }
        .fixed{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
        }

    </style>
</head>
<body>
    <div class="top">
        <img src="images/top.png" alt="" width="100%">
    </div>
    <div class="nav" id="navPart">
        <img src="images/nav.png" alt="" width="100%">
    </div>
    <div class="main">
        <img src="images/main.png" alt="" width="1200">
    </div>
    <script>
        function getScroll() {
            return{
                top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,
                left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0
            }
        }
        document.onscroll = function () {
            let divTop = document.getElementsByClassName("top")[0];
            if(getScroll().top>=divTop.offsetHeight){
                document.getElementById("navPart").className = "nav fixed";
                document.getElementsByClassName("main")[0].style.marginTop =document.getElementById("navPart").offsetHeight+"px";
            }else{
                document.getElementById("navPart").className ="";
                document.getElementsByClassName("main")[0].style.marginTop ="";
            }
        }
    </script>
</body>
</html>

这里的截图用的腾讯网的，如果侵权请告知，我会及时删除。代码中用到的图片大家可以在网上随便截取几张就行。