定位艺术：CSS定位模式详解与实战应用-CSDN博客

本文链接：https://blog.csdn.net/Hyc_cheng/article/details/120660881

一、前言

定位，关键则在于一个"位"上面。

二、为什么要学习定位

如果要实现某个东西能够随便在一个盒子里自由随意移动、或压着某个元素、或超出某个盒子等等，这一类用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做。

三、元素的定位属性

元素的定位属性 = 定位模式 + 边偏移。

1、定位模式（定位的分类）

在CSS中。position属性用于定义元素的定位模式，其基本语法如下：

选择器{position:属性值；}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

2、边偏移

即告诉盒子要往哪边走，上下左右

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

也就是说，以后定位要和这边偏移搭配使用。比如，top:100px;left；100px;等等

四、静态定位(static)–默认

静态定位是所有元素默认的定位方式，当position属性的取值为static时，可以将元素定位为静态位置。所谓的静态位置就是各个元素在html文档流中默认的位置。
即网页中所有元素都默认的是静态定位哦~ 其实就是标准流的特性。
在静态定位状态下，无法用过边偏移属性（left、right、top、bottom）来改变元素的位置
√静态定位唯一的用处：取消定位

五、相对定位(relative)-自恋型即以自己为中心

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置中。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：
在这里插入图片描述
代码如下：

<!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>相对定位</title>

    <style>
        .box1 {
            /* box1 添加相对定位 */
            position: relative;
            top: 100px;
            left: 100px;
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box1">

    </div>

    <div class="box2">

    </div>
</body>

</html>

注意：
1.相对定位最重要的一点：它可以通过边偏移移动位置，但是原来所占位置，继续占有。
2.其次，每次移动的位置，是以自己的左上角为基准点（相对于自己来移动）
就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流的方式对待它。（相对位置不脱标）
如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

六、绝对定位（absolute）–拼爹型

如果文档可以滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的值为absolute时，可以将元素的定位模式设置为绝对定位。
注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

添加绝对定位之前：
在这里插入图片描述
代码如下：

<!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>绝对定位</title>

    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

添加绝对定位之后：
在这里插入图片描述
代码如下：

<!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>绝对定位</title>

    <style>
        .box1{
            /* 添加绝对定位 */
            position:absolute;
            top: 100px;
            left: 100px;
            
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

绝对定位的对齐准则分为两种：父元素无定位和父元素有定位的情况下，对齐方式不一样。

父亲没有定位

若所有父元素都没有定位，则以浏览器当前屏幕为准对齐。如上面所示。

父亲有定位

如果父亲有定位，那么绝对定位将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）为准进行定位。
在这里插入图片描述
代码如下：

<!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>绝对定位</title>

    <style>
        .box{
            /* 父亲使用相对定位 */
            /* 如果此时父亲没有定位，则子元素的绝对定位会议浏览器为基准进行定位 */
            position:relative;
            top: 0px;
            left: 0px;

            width: 800px;
            height: 500px;
            margin: 100px auto;
            background-color: green;
        }
        .box1{
            /* 添加绝对定位 */
            position:absolute;
            top: 100px;
            left: 100px;

            width: 300px;
            height: 300px;
            background-color: blue;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
   
</body>
</html>

注意：
如果有多重嵌套的情况下父元素有无定位可详细分为以下四种：
祖父和父亲都没有定位的情况下：子元素以浏览器当前屏幕为基准定位
祖父有定位而父亲没有定位的情况下：子元素以祖父为基准定位
祖父没有定位而父亲有定位的情况下：子元素以父亲为基准定位
祖父和父亲都有定位的情况下：子元素以父亲为基准定位

总结：绝对定位的子元素取最近的定位父元素为准进行定位

七、子绝父相

意思是子级是绝对定位的话，父亲要用相对定位。
首先，我们说下，绝对定位是将元素依据最近的已经（定位、固定、或者相对定位）的父元素（祖先）进行定位。
也就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位、相对定位，甚至是固定定位都可以）。即子绝父绝，子绝父相都是正确的。

八、定位的盒子居中对齐

定位的盒子居中对齐
正常情况下，让一个盒子居中，通常只需要给个width,然后设置margin:0 auto;就能左右居中对齐。
但是当一个盒子设置浮动（float）或者绝对定位（position：absolute）时，此时margin:0 auto就不管用了。
定位的盒子也可以水平或垂直居中，有一个算法：
1.首先left: 50%----父盒子的一半大小；
2.然后走(外边距)自己负的一半值就可以了[margin-left:-xxpx(自己宽度值的一半)或者transform: translateX(-50%)]

使用绝对定位之前，盒子居中对齐：
在这里插入图片描述
代码如下：

<!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>定位的盒子居中对齐</title>

    <style>
        .box{
           
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

添加绝对定位之后，盒子就没有居中对齐了：
在这里插入图片描述
代码：

.box{
           
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin: 0 auto;
           
            position: absolute;
            top: 0px;
            left: 0px;
          
        }

所以需要将代码修改如下：

<!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>定位的盒子居中对齐</title>

    <style>
        .box{
           
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin: 0 auto;
           
            position: absolute;
            top: 0px;
            left: 0px;
            /*定位的盒子也可以水平或垂直居中，有一个算法：
1.首先left: 50%----父盒子的一半大小；
2.然后走(外边距)自己负的一半值就可以了[margin-left:-xxpx(自己宽度值的一半)或者transform: translateX(-50%)]*/
            left: 50%;
		    margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

最后效果就能实现定位的居中对齐：
在这里插入图片描述

九、固定定位（fixed）–认死理型

固定定位是绝对定位的一种特殊形式，类似于正方形是一种特殊的矩形。它以浏览器的可视窗口作为参照物定位网页元素。当position属性取值为fixed时，即可将元素的定位设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定位自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器大小如果变化，该元素都会显示在浏览器窗口的固定位置。

语法：

选择器{position:fixed;}

注意：

1、固定定位的元素和父元素没有任何关系，只认浏览器；
2、固定定位的元素完全脱标，不占位置，不随着滚动条滚动而滚动；
3、以浏览器的可视窗口为参照点移动元素。
IE6等低版本浏览器不支持固定定位。

十、定位模式转换

跟浮动一样,元素添加了绝对定位和固定定位之后,元素模式也会发生转换,都会转为行内块模式
行内块的宽度和高度和内容有关
因此,比如行内元素如果添加了绝对定位或固定定位或浮动后,可以不用转换模式,直接给高度和宽度就可以了。

十一、粘性定位-了解

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

语法：

选择器{position:sticky;top:10px;}

粘性定位的特点：

1、以浏览器的可视窗口为参照点移动元素（固定定位特点）
2、粘性定位占有原先的位置（相对定位特点）
3、必须添加top、left、right、bottom其中一个才生效
4、跟页面滚动搭配使用。兼容性较差，IE不支持。

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

<!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>粘性定位</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            height: 3000px;
        }

        .nav {
            /* 粘性定位 */
            position: sticky;
            top:0px;

            width: 800px;
            height: 50px;
            margin: 100px auto;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="nav">导航栏</div>
</body>

</html>