CSS基础: 五种定位以及定位叠放次序

最新推荐文章于 2024-04-19 21:55:40 发布

小猪弟

最新推荐文章于 2024-04-19 21:55:40 发布

阅读量1.3k

点赞数 1

分类专栏： CSS 文章标签： css 定位子绝父相粘性定位固定定位

本文链接：https://blog.csdn.net/u011863822/article/details/123378058

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

前面看到浮动其实可以让某个盒子模块在某个位置，但是为什么还要右定位？

其实很简单，因为浮动有些定位是解决不了的，比如看下图：

在这里插入图片描述

在滑动的时候，你发现了没有，那就是标记的地方，拉动网页都在顶部和侧面，如果使用浮动能解决吗？（只用CSS，而不适用js脚本实现。）

以上效果，标准流和浮动都无法快速实现，此时需要定位来实现了。

简单的说，浮动可以让多个块级盒子一行没有缝隙的排列显示，经常用于横向排列。而定位测试可以让盒子自由在某个盒子内移动位置或者固定在屏幕的某个位置。

定位简单的说就是将盒子定在某个一位置.但是在实际操作中其定位是将其盒子摆放到某一个位置，然后移动到自己想要放的地方。其实这个说法说实话有点绕。

用我的大白话说就是，盒子的初始在是以其标签所在的位置，然后再移动到自己想要放的位置，所以定位右两个属性：定位=定位属性+边偏移。

定位模式：用于指定一个元素在文档中的定位方式。
边偏移：决定了元素的最终位置。

定位模式是通过CSS的position属性来设置，其有五种方式：

值	藐视
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

边偏移具有四个属性：top，bottom，left和right。

边偏移	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

注意：这四个属性必须是由定位的时候使用，不然是无效的,当然四个值也可以是负值。

如果一个盒子既有left又有right，默认执行left，无论位置前后。同理top和bottom一样执行top。

所以格式如下:

     position:[static |relative |absolute |fixed  ];
     [top: 偏移量;  bottom: 偏移量;left: 偏移量;right: 偏移量;]

静态定位-static

这个定位，其实就是按照标签本身的位置而放置，所以一般不会用，知道即可。

相对定位-relative

相对定位是元素在移动位置的时候，相对于它原来的位置来说的，说白了就是按照本身标签应当所在的位置然后进行移动。其由两个特点：

它是点关于自己原来的位置来移动的。
原来的标准流位置继续占有，后面的盒子仍然不会占其原来位置的空间。其不脱标，继续保留原来位置。（为什么要这样说，自然有其它定位不会保留原来位置，容易因为其这个特点，很多时候和绝对定位搭配着用。）

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">

        .c{
            width: 400px;
            height: 400px;
            border:  1px solid black;

        }
        .s1{
            width: 50px;
            height: 50px;
            background-color: #d10000;
        }
        .s2{
            width: 50px;
            height: 50px;
            background-color:#4a90e2;
        }
        .position_relative{
            position: relative;
            left: 10px;
            top:10px;
        }

    </style>
</head>
<body>
<div class="c">
    <div class="s1"></div>
    <div class="s2"></div>

</div>

&nbsp;
&nbsp;
&nbsp;
&nbsp;
<div class="c">
    <div class="s1 position_relative"></div>
    <div class="s2"></div>
</div>

</body>
</html>

在这里插入图片描述

当然其四个属性一个也不不写，也就是在原来位置不动。

绝对定位

绝对定位是元素在移动位置的时候，是相对于其它元素来说的。

其特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
如果祖先元素有定位（相对，绝对，固定），则以最近一级有定位元素位参考点移动位置。
绝对定位不再占有原来坐标，简单说就是位置也腾出来了。

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">
.c{
            width: 200px;
            height: 200px;
            border:  1px solid black;

        }
        .s1{
            width: 50px;
            height: 50px;
            background-color: #d10000;
        }
        .s2{
            width: 50px;
            height: 50px;
            background-color: #4a90e2;
        }
        .position_relative{
            position: relative;
            left: 10px;
            top:10px;
        }
        .position_absolute{
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
 
<div class="c">
    <div class="s">测试模块</div>

</div>
&nbsp;
&nbsp;

<div class="c">
    <div class="s1">第一个模块</div>
     <div class="s2">第一个模块</div>
</div>

&nbsp;
<div class="c">
    <div class="s1 position_absolute">第二个模块</div>
    <div class="s2">第二个模块</div>
</div>

&nbsp;
&nbsp;

<div class="c position_relative">
    <div class="s1 position_absolute">第三个模块</div>
    <div class="s2 ">第三个模块</div>
</div>

</body>
</html>

在这里插入图片描述

所以很多时候子元素位绝对定位的话，父类元素就会使用相对定位，从而有了一句神奇的词汇—子绝父相。

当然其四个属性一个也不不写，也就是在原来位置不动。

因为这个是演示一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">
        .c{
            width: 200px;
            height: 200px;
            border:  1px solid black;

        }
        .s0{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .s1{
            width: 50px;
            height: 50px;
            background-color: #d10000;
        }
        .s2{
            width: 100px;
            height: 100px;
            background-color: #4a90e2;
        }
        .position_relative{
            position: relative;
            left: 10px;
            top:10px;
        }
        .position_absolute{
            position: absolute;
        }

    </style>
</head>
<body>
<div class="c position_relative">
    <div class="s1 position_absolute"> </div>
    <div class="s2 "> </div>
</div>
&nbsp;
<div class="c position_relative">
    <div class="s0"></div>
    <div class="s1 position_absolute"> </div>
    <div class="s2 "> </div>
</div>

</body>
</html>

在这里插入图片描述

定位特殊性：

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小就是内容的大小。

是不是感觉很像是浮动的特点，同样还有特点相似：浮动元素和绝对定位（固定定位）元素都不会触发外边距合并的问题。

浮动对比固定定位

这个有没有发现一件事情，那就是浮动的效果也会影响后面的元素，但是两者除了定位方式不同，其效果有没有区别。

先看演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">

        .c{
            width: 400px;
            height: 400px;
            margin: 0px auto;
        }
        .c1{
            background-color: #4a90e2;
        }
        .c2{
            background-color:#f86262;
        }
        .s{
            width: 40px;
            height: 40px;

        }
        .position_relative{
            position: relative;
            top:10px;
        }
        .position_absolute{
            position: absolute;
            top:20px;
            left: 10px;
        }
        .s1{
            background-color: #f86262;
        }
        .s2{
            background-color: #cccccc;
            float: right;
        }
    </style>
</head>
<body>

<div class="c c1 position_relative">
    <div class="s s1 position_absolute"></div>
    仇囚就是如此，举起酒坛不停的灌入嘴里，让烈酒穿过喉咙，在身体中燃烧，这样才能让自己感觉到温暖。另一只手反手将一侧斜放的剑拔出，含着烈酒噗一口喷了上去。酒水随着剑身流淌起来，仇囚咧着嘴巴嘿嘿一笑，扭曲的五官，此时更加的狰狞起来。 作者：乱侃小猪弟 https://www.bilibili.com/read/cv3164205 出处：bilibili

</div>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
<div class="c c2">
     <div class="s s2"></div>
    仇囚就是如此，举起酒坛不停的灌入嘴里，让烈酒穿过喉咙，在身体中燃烧，这样才能让自己感觉到温暖。另一只手反手将一侧斜放的剑拔出，含着烈酒噗一口喷了上去。酒水随着剑身流淌起来，仇囚咧着嘴巴嘿嘿一笑，扭曲的五官，此时更加的狰狞起来。 作者：乱侃小猪弟 https://www.bilibili.com/read/cv3164205 出处：bilibili
</div>

</body>
</html>

在这里插入图片描述

这个就可以看出：

浮动元素：会压住下面的标准流的盒子，但是不会压住下面标准流的盒子里面的文字（图片）。
绝对定位：会压住下面标准流所有的内容。

为什么会出现这样的情况，是因为浮动的出现就是为了呈现word种呈现的图片周围围着文字那种效果。

固定定位

固定定位是元素固定在浏览器可视区的位置。

主要使用场景：在浏览器滚动的时候元素的位置不会改变。很多网站的左侧二维码下载就是就这样。

其特点：

以浏览器的可视窗口位参考点移动元素。
- 跟父类元素没任何关系。
- 不随着滚动条滚动。

在这里插入图片描述

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">
        .c{
            width: 800px;
            height: 1400px;
            margin: 0px auto;
        }
        .c1{
            background-color: #4a90e2;
        }
        .c2{
            background-color:#f86262;
        }
        img{
            position: fixed;
            top: 200px;
            /* 如果想贴着内容板块右侧的话 宽度一半然后  */
            left: 50%;
            /*    然后在内容版本一般，通过外边距*/
            margin-left: 400px;
        }
    </style>
</head>
<body>
<div class="c c1">
    <img src="jpg/yuanshen.png">

</div>

<div class="c c2"></div>

</body>
</html>

在这里插入图片描述

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。

其特点：

以浏览器的可视窗口位参照（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加top,left,right,bottom其中一个才有效。

博客的导航栏其实就实现：

在这里插入图片描述

当然这个新属性出来之前，有的网站就是这个效果了，不过其实现是通过js实现。

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">
        .nav{
            width: 800px;
            height: 100px;
            position: sticky;
            top: 10px;

            background-color: #333333;
            margin: 40px auto;
        }
        .c{
            width: 800px;
            height: 1400px;
            margin: 0px auto;
        }
        .c1{
            background-color: #4a90e2;
        }
        .c2{
            background-color:#f86262;
        }

    </style>
</head>
<body>
<div class="nav">
    导航栏
</div>
<div class="c c1">


</div>

<div class="c c2"></div>

</body>
</html>

在这里插入图片描述

定位叠放次序 z-index

使用定位布局的时候，可能会出现盒子重叠的情况，其显示默认是按照书写顺序后来者显示。如果需要按照自己特定的需求实现，这个时候需要使用z-index来控制盒子的前后次序。

格式：

/* 适用于：定位元素。即定义了position为非static的元素*/
z-index: auto | <integer>

数值可以是正整数，负数或者0，默认是auto，数值越大，盒子越考上。
如果属性值相同，则按照书写顺序，后来者居上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">

        .c{
            width: 400px;
            height: 400px;
            margin: 0px auto;
        }
        .c1{
            background-color: #4a90e2;
        }
        .c2{
            position: relative;
            background-color:#4a90e2;
        }
        .s{
            width: 40px;
            height: 40px;

        }
        .position_relative{
            position: relative;
            top:10px;
        }
        .position_absolute{
            position: absolute;
            top:20px;
            left: 10px;
        }
        .s1{
            background-color: #f86262;
        }
        .s2{
            background-color: #cccccc;
        }
        .z1{
            z-index: 1;
        }

    </style>
</head>
<body>

<div class="c c1 position_relative ">
    <div class="s s1 position_relative"></div>
    <div class="s s2 position_absolute"></div>
</div>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
<div class="c c2 position_relative">
    <div class="s s1 position_relative z1"></div>
    <div class="s s2 position_absolute"></div>
</div>

</body>
</html>

在这里插入图片描述

例子演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #cccccc;
        }
        .nav{
            width: 520px;
            height: 280px;
            position: relative;
            margin: 20px auto;


        }
        .nav img{
            width: 520px;
            height: 280px;
            border-radius: 15px;
        }
        .biao{
            width: 20px;
            height: 30px;
            background-color: rgba(0,0,0,.3);
            color: #cccccc;

            line-height: 30px;


        }
        .left{
            position: absolute;
            top: 50%;
            border-top-right-radius:30px ;
            border-bottom-right-radius:30px ;
            margin-top: -15px;
        }
        .right{
            position: absolute;
            top: 50%;
            right: 0px;
            border-top-left-radius:30px ;
            border-bottom-left-radius:30px ;
            margin-top: -15px;
            text-indent: 10px;
        }
        ul{
            width: 70px;
            height: 13px;
            position: absolute;
            left: 260px;
            margin-left: -35px;
            bottom: 15px;
            background-color: rgba(0,0,0,.4);
            border-radius:14px ;

        }
        li{
            width: 8px;
            height: 8px;
            float: left;
            background-color: #cccccc;
            border-radius: 8px;
            margin: 3px;
        }
        li:hover{
            display: block;
            background-color: #d10000;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="biao left"><a href="#">&lt;</a></div>
    <div class="biao right"><a href="#">&gt;</a></div>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
    <img src="jpg/tb.jpg">

</div>

</body>
</html>

在这里插入图片描述

小猪弟

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基础: 五种定位以及定位叠放次序

前面看到浮动其实可以让某个盒子模块在某个位置，但是为什么还要右定位？其实很简单，因为浮动有些定位是解决不了的，比如看下图：在滑动的时候，你发现了没有，那就是标记的地方，拉动网页都在顶部和侧面，如果使用浮动能解决吗？（只用CSS，而不适用js脚本实现。）以上效果，标准流和浮动都无法快速实现，此时需要定位来实现了。简单的说，浮动可以让多个块级盒子一行没有缝隙的排列显示，经常用于横向排列。而定位测试可以让盒子自由在某个盒子内移动位置或者固定在屏幕的某个位置。定位简单的说就是将盒子定在某个一位置.但是在
复制链接

扫一扫