CSS定位简介

最新推荐文章于 2024-05-15 13:58:29 发布

Huang_WeiHong

最新推荐文章于 2024-05-15 13:58:29 发布

阅读量718

点赞数

分类专栏： web 文章标签：定位 html css

本文链接：https://blog.csdn.net/Huang_WeiHong/article/details/118877819

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS定位描述

相对定位

概念

让元素相对于自己原来的位置，进行位置调整，除了可以修改它的最终位置，可以与页面上的其他元素重叠

position: relative;<!-- 相对定位 -->

top，bottom，left和right来精确指定要将定位元素移动到的位置，注意：top是从上往下移动，left是从左往右移动，这些属性值可以采用逻辑上期望的任何单位——px，mm，%等

特点

相对定位不脱离标准文档流

相对定位后的"盒子"相当于本体一个"影子"，可以在任何地方，但是本体还是位于标准文档流中的位置，其他标准文档流的"盒子"不会占有本体位置，同样，“影子"也不会挤走其他位于标准文档流中的"盒子”，而是覆盖在其上面
比如：

<!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>
        .div1{
            height: 100px;
            width: 100px;
            background-color:cadetblue;
        }
        .div2{
        /*相对定位 relative*/
            position: relative;
            top:20px;
            left: 20px;
            height: 100px;
            width: 100px;
            background-color: blue;
        }
        .div3{
            height: 100px;
            width: 100px;
            background-color:blanchedalmond;
        }
    </style>
</head>
<body>
    <div class="div1">NO.1</div>
    <div class="div2">NO.2</div>
    <div class="div3">NO.3</div>
</body>
</html>

效果如下：
在这里插入图片描述
如图所示，NO.2的实际位置还是位于标准文档流中的位置（红色虚线的地方），因此标准文档流中的NO.3没有占领NO.2原本的位置，移动后的NO.2也没有挤走NO.3

绝对定位

概念

绝对定位的盒子相对于被定位的外层容器（父容器没有定位就看爷容器有没有定位，总之一层一层往外找）内部进行调整位置，如果往上找没有被定位的父容器，那么绝对定位盒子会被包含在初始块容器中，这个初始块容器有着和浏览器视口一样的尺寸，并且< html >元素也被包含在这个容器里面

position: absolute;<!-- 绝对定位 -->

以父容器为参考点

注意：外层被定位的容器可以是任何定位类型，子绝父绝，子绝父相，子绝父固都可以
top，bottom，left和right指定盒子应距离每个包含父盒子的边的距离，而不是同相对定位中指定被定位的盒子应该移动的方向
比如：

<!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>
        .div1{
            height: 200px;
            width: 200px;
            background-color:cadetblue;
        }
        .div2{
        <!--给被绝对定位的盒子的父容器进行定位，这里是“子绝父相”-->
            position: relative;
            top:20px;
            left: 20px;
            height: 200px;
            width: 200px;
            background-color:cyan ;
        }
        .div2-son{
            position: absolute;
            top:100px;
            left: 100px;
            height: 50px;
            width: 50px;
            background-color:brown;
        }
        .div3{
            height: 200px;
            width: 200px;
            background-color:blanchedalmond;
        }
    </style>
</head>
<body>
    <div class="div1">NO.1</div>

    <div class="div2">NO.2
    <div class="div2-son">son</div>
    </div>

    <div class="div3">NO.3</div>
</body>
</html>

效果如下：
在这里插入图片描述
如果不给被绝对定位的盒子设置height与width，而设置top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0；会发生什么呢？

<!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>
        .div1{
            height: 200px;
            width: 200px;
            background-color:cadetblue;
        }
        .div2{
        <!--给被绝对定位的盒子的父容器进行定位，这里是“子绝父相”-->
            position: relative;
            top:20px;
            left: 20px;
            height: 200px;
            width: 200px;
            background-color:cyan ;
        }
        .div2-son{
            position: absolute;
            <!--这里不设置height与width-->
            top: 0;
            bottom: 0; 
            left: 0;
            right: 0; 
            margin: 0; 
            background-color:brown;
        }
        .div3{
            height: 200px;
            width: 200px;
            background-color:blanchedalmond;
        }
    </style>
</head>
<body>
    <div class="div1">NO.1</div>

    <div class="div2">NO.2
    <div class="div2-son">son</div>
    </div>

    <div class="div3">NO.3</div>
</body>
</html>

效果如下：
在这里插入图片描述
我们可以看到，因为子盒子距离父容器上下左右的边框都为0，且未给子盒子设置height与width，所以子盒子把父容器覆盖了
注意：绝对定位的子盒子是无视被参考的容器的padding的

以初始块容器为参考

这里有个有意思的地方，我们说过如果绝对定位的盒子没有被定位的父容器，那么绝对定位盒子会被包含在初始块容器中，这个初始块容器有着和浏览器视口一样的尺寸，并且< html >元素也被包含在这个容器里面，这时候的top和bottom是有区别的：

top的参考点是页面的上边框，不受浏览器翻动的影响
bottom的参考点是浏览器的下边框，注意是未翻动的浏览器窗口的下边框，简单点说就是点开页面后的那窗口的浏览器的下边框

top好理解，就是整个页面的上边框：

在这里插入图片描述
注意理解bottom中未翻动的浏览器窗口的下边框的意思：

固定定位

概念

这与绝对定位的工作方式完全相同，区别在于绝对定位参考是最近的被定位的外层容器，而固定定位相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变

position: fixed;<!-- 固定定位 -->

使用场景

因为被固定定位的盒子不受页面滚动的影响，所以我们常常用来做导航单元或者返回顶部
比如:

<!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{
            position: fixed; /*固定定位*/
            top:0px;
            left:50%;  /*left与margin-left使导航居中*/
            margin-left: -300px;
            
        }
        li{
        /*使用浮动使<li>标签排在一排*/
            float: left;
            width: 80px;
            height: 40px;
            background-color:white;
            list-style-type:none;/*使<li>标签中自带的·去掉*/
            text-align: center;/*使<li>标签中的内容居中*/
        }
        .img{
            height: 913px;
            width: 1222px;
            margin:0 auto ;/*使图片居中*/
        }
    </style>
</head>
<body>
    <div class="img"><img src="C:\background.png"></div>
    <div class="div">
        <ul>
            <li>1</li>
            <li>1</li>
            <li>2</li>
            <li>2</li>
            <li>3</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

z-index

概念

当同一块区域有很多个被定位之后的盒子，它们都有覆盖其他盒子的能力，到底谁覆盖谁呢？这里CSS引入了一个属性z-index，z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。

特点

对于一个已经定位的盒子（即其 position 属性值不是 static，这里要注意的是 CSS 把元素看作盒子），z-index 属性指定：

盒子在当前堆叠上下文中的堆叠层级
盒子是否创建一个堆叠上下文

z-index: auto;/*auto不会为当前盒子创建新的层级，而是与父盒子一致*/
z-index: 0;
z-index: 100;
z-index: 999999;
z-index: -1;/* 负数可以降低优先级 */
z-index: inherit;/* 全局值 */
z-index: initial;
z-index: unset;

比如：

<!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>
        .wrapper {
            position: relative;
        }
        .dashed-box {
            position: relative;
            z-index: 1;
            border: dashed;
            height: 8em;
            margin-bottom: 1em;
            margin-top: 2em;
        }
        .gold-box {
            position: absolute;
            z-index: 3;
            /* put .gold-box above .green-box and .dashed-box */
            background: gold;
            width: 80%;
            left: 60px;
            top: 3em;
        }
        .green-box {
            position: absolute;
            z-index: 2;
            /* put .green-box above .dashed-box */
            background: lightgreen;
            width: 20%;
            left: 65%;
            top: -25px;
            height: 7em;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="dashed-box">Dashed box</div>
        <div class="gold-box">Gold box</div>
        <div class="green-box">Green box</div>
    </div>
</body>
</html>

效果如下：

在这里插入图片描述

总结

在使用定位时，注意盒子是否脱离标准文档流，注意定位参考点，注意被定为盒子之间的层级关系等等，定位往往能构建出网站的大致框架，是写网站的重要一环

Huang_WeiHong

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS定位简介

CSS定位描述相对定位概念让元素相对于自己原来的位置，进行位置调整，除了可以修改它的最终位置，可以与页面上的其他元素重叠position: relative;top，bottom，left和right来精确指定要将定位元素移动到的位置，注意：top是从上往下移动，left是从左往右移动，这些属性值可以采用逻辑上期望的任何单位——px，mm，%等特点相对定位不脱离标准文档流相对定位后的"盒子"相当于本体一个"影子"，可以在任何地方，但是本体还是位于标准文
复制链接

扫一扫