CSS学习（第五天）（定位）

加蓓努力我先飞

已于 2022-04-18 10:17:56 修改

阅读量320

点赞数 1

分类专栏： 2.CSS 文章标签： css

于 2020-08-31 15:32:00 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/108309290

版权

2.CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

定位

1 定位
2 综合案例
- 淘宝焦点图布局
- 成品
3 网页布局总结
4 元素的显示与隐藏

1 定位

1.1 为什么需要定位

标准流或浮动都无法快速实现，此时就需要定位来实现

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
当我们滚动窗口的时候，盒子是固定屏幕某个位置的
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子

1.2 定位组成

定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位=定位模式+边偏移

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

1.2.1 定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：
在这里插入图片描述

1.2.2 边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。

只有定位才能实现，以前的标准流和浮动都不行。
在这里插入图片描述

1.3 静态定位（static）（了解）

静态定位是元素的默认定位方式，无定位的意思。
语法∶

选择器{ position: static; }

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

1.4 相对定位relative（重要）

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)。
语法:

选择器{ position: relative; }

相对定位的特点: (务必记住)

它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
原来在标准流的位置继续占有 ,后面的盒子仍然以标准流的方式对待它。( 不脱标,继续保留原来位置)

因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述

1.5绝对定位absolute (重要)

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。
语法:

选择器{ position: absolute; }

绝对定位的特点: ( 务必记住)

如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位( Document文档)。
如果祖先元素有定位(相对、绝对、固定定位) , 则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。( 脱标)

1.5.1 如果`没有祖先元素`,则以浏览器为准定位(Document文档)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .son {
            position: absolute;
            bottom: 10px;
            left:10px;
            width:200px ;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="son"></div>
</body>
</html>

在这里插入图片描述

1.5.2 `祖先元素没有定位`,则以浏览器为准定位( Document文档)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 20px;
            height: 20px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述

1.5.3 如果祖先元素有定位(相对、绝对、固定定位) , 则以最近一级的有定位祖先元素为参考点移动位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grandpa {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: rgb(224, 211, 20);
        }
        .father {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 20px;
            height: 20px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="grandpa">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

1.6 子绝父相的由来

弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。

这个“子绝父相”太重要了,是我们学习定位的口诀,是定位中最常用的一种方式这句话的意思是:子级是绝对定位的话,父级要用相对定位。

①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时,需要占有位置,因此父亲只能是相对定位。
这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。

总结:因为父级需要占有位置,因此是相对定位，子盒子不需要占有位置,则是绝对定位

当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。

1.7 固定定位 fixed(重要)

1.7.1`固定定位`是元素固定于浏览器可视区的位置。

固定定位是元素固定于浏览器可视区的位置。主要使用场景∶可以在浏览器页面滚动时元素的位置不会改变。
语法∶

选择器{ position: fixed; }

固定定位的特点∶（务必记住）
1．以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系
不随滚动条滚动。

2．固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dj {
            position: fixed;
            top: 100px;
            right: 40px;
        }
    </style>
</head>
<body>
    <div class="dj">
        <img src="images/dj.png" alt="">
    </div>
    <p>请尽情吩咐妲己，主人</p>
</body>
</html>

在这里插入图片描述

1.7.2 固定定位小技巧∶固定在版心右侧位置。

小算法∶
1.让固定定位的盒子left:50%，走到浏览器可视区（也可以看做版心）的一半位置。
2．让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            /* 浏览器宽度的一半 */
            left:50%;
            /* 利用margin 走版心盒子的一半 */
            margin-left: 400px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子800像素</div>
</body>
</html>

在这里插入图片描述

1.8粘性定位sticky (了解）

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

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

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

1.9 定位的总结

在这里插入图片描述
1.一定记住相对定位、固定定位、绝对定位两个大的特点∶

是否占有位置（脱标否）
以谁为基准点移动位置。
相对定位可以通过margin将图片居中，绝对定位和固定定位是不可以的

1.10定位叠放次序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
语法∶

选择器{ z-index: 1; }

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .xiongda {
            background-color: red;
            z-index: 1;
        }
        .xionger {
            background-color: green;
            left: 50px;
            top: 50px;
        }
        .qiangge {
            background-color: blue;
            left: 200px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box xiongda">熊大</div>
    <div class="box xionger">熊二</div>
    <div class="box qiangge">光头强</div>
</body>
</html>

在这里插入图片描述

1.11定位的拓展

1.绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。

left:50%;:让盒子的左侧移动到父级元素的水平中心位置。
margin-left:-100px;:让盒子向左移动自身宽度的一半。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            /* 水平居中 */
            /* 1.Left走50%父容器宽度的一半 */
            left: 50%;
            /* 2.margin负值往左边走自己盒子宽度的一半*/
            margin-left: -100px;
            /* 垂直居中 */
            /* 3.top走50%父容器宽度的一半 */
            top: 50%;
            /* 4.margin负值往左边走自己盒子高度的一半*/
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 定位的话，下面这个不管用 */
            /* margin: auto; */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>