CSS - 定位

Pupper2023-02-202024-04-18

一、元素定位

定位模式	是否脱标	移动位置	是否常用
static（静态定位）	不脱标	不能使用边偏移	很少
relative（相对定位）	不脱标（占有位置）	相对自身位置移动	常用
absolute（绝对定位）	脱标（不占有位置）	带有定位的父级	常用
fixed（固定定位）	脱标（不占有位置）	浏览器可视区	常用
sticky（粘性定位）	不脱标（占有位置）	浏览器可视区	当前阶段少

1. 定位的组成

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

::: note
定位 = 定位模式 + 边偏移

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

语法：

1	position: static \| relative \| absolute \| fixed

定位模式：

参数	含义
`static`	静态定位
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位
`sticky`	粘性定位

边偏移：

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

2. 静态定位（static）

语法：

1
2
3

选择器 {
    position: static;
}

特性：

静态定位按照标准流特性摆放，没有边偏移
使用相对较少

3. 相对定位（relative）

相对定位：元素在移动位置的时候，是相对于它 原来的位置 来说的

语法：

1
2
3

选择器 {
    position: relative;
}

特性:

以它原来的位置为参考移动；
他移动后原来的位置不会被占据，仍然保留（不脱标）；
边偏移的距离是以移动后的位置距离原来的位置来计算的，如：left：100px，说明向右移动100像素，原来位置在它的左侧

::: details

<!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>
        .box1{
            position: relative;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: rgba(228, 31, 228, 0.8);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: rgba(43, 185, 228, 0.8);
        }
    </style>
</head>
<body>
    <div class="box1">相对定位</div>
    <div class="box2"></div>
    
</body>
</html>

:::

4. 绝对定位（absolute）

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

语法：

1
2
3

选择器 {
    position: absolute;
}

特点:

如果没有父元素或父元素没有定位，则以浏览器为准定位;
如果祖先元素有定位（相对、绝对、固定定位），则以有点位的最近一级祖先元素为参考点一定位置
绝对定位不再占有原来的位置（脱标）

::: details

<!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>
		.box1 {
			width: 300px;
			height: 300px;
			background-color: rgba(228, 31, 228, 0.8);
		}

		.box2 {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 200px;
			height: 200px;
			background-color: rgba(43, 185, 228, 0.8);
		}

		.box3 {
			position: absolute;
			right: 10px;
			bottom: 10px;
			width: 100px;
			height: 100px;
			background-color: rgba(233, 229, 8, 0.8);
		}
	</style>
</head>

<body>
	<div class="box1">
		<div class="box2">先祖元素没有定位时，以浏览器为基准 <div class="box3">先祖元素有定位时，以先祖元素为基准</div>
		</div>
	</div>
</body>

</html>

:::

5. 子绝父相

子绝父相：子元素绝对定位，父元素相对定位

特点：

子级绝对定位，不占有位置，可以放到父盒子里的任何位置，不影响其他的兄弟盒子
父盒子需要加定位限制子盒子的活动范围

::: details

<!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>
        li {
            list-style: none;
        }
        .box-bd ul li {
            position: relative;
            float: left;
            width: 228px;
            height: 230px;
            background-color: #fff;
            margin-right: 15px;
            margin-bottom: 15px;
            border: 1px solid red;
        }
        .box-bd ul li>img {
            width: 100%;
        }
        .box-bd ul li em {
            position: absolute;
            top: 4px;
            right: -6px;
        }
    </style>
</head>

<body>
    <div class="box-bd">
        <ul class="clearfix">
            <li>
                <em>
                    <img src="https://img.pupper.cn/img/202111231118389.png" alt="">
                </em>
                <img src="https://img.pupper.cn/img/202111231118957.png" alt="">
                <h4>子绝父相</h4>
            </li>
        </ul>
    </div>

</body>

</html>

:::

6. 固定定位（fixed）

固定定位：将元素固定在浏览器中的某个位置

语法：

1
2
3

选择器 {
    position: fixed;
}

特点：

以浏览器的可是窗口为参照点移动元素
1. 跟父元素没有任何关系
2. 不随滚动条滚动
不占用原来的位置（脱标）
1. 可以看做是一种特殊的绝对定位

示例：
将元素固定到版心右侧：先固定到浏览器的一般宽度，在使用margin 移动版心一半的宽度

::: details

<!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>
        li {
            list-style: none;
        }
        .box-bd ul li {
            margin: 0 auto;
            width: 500px;
            height: 1500
            px;
            background-color: #fff;
            border: 1px solid red;
        }
        .box-bd ul li>img {
            width: 100%;
            height: 1500px;
        }
        .box-bd ul li em {
            position: fixed;

            top: 500px;
            left: 50%;

            margin-left: 275px;
        }
    </style>
</head>

<body>
    <div class="box-bd">
        <ul class="clearfix">
            <li>
                <em>
                    <img src="https://img.pupper.cn/img/202111231118389.png" alt="">
                </em>
                <img src="https://img.pupper.cn/img/202111231118957.png" alt="">
            </li>
        </ul>
    </div>

</body>

</html>

:::

7. 粘性定位（sticky）

粘性定位：相对定位与固定定位的混合

语法：

1
2
3

选择器 {
    position: sticky;
}

特点：

以浏览器的可视窗口为参照点移动元素（固定定位的特点）
占有原来的位置（相对定位的特点）

::: details

<!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>
        body {
            height: 3000px;
            border: 1px solid red;
        }

        .nav {
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            margin: 100px auto;
            background-color: rgb(82, 79, 79);
            color: #fff;
            font-size: 40px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="nav">
        这是粘性定位
    </div>

</body>

</html>

:::

二、定位的特性

1. 定位的叠放次序（z-index）

z-index：用于控制盒子的在使用定位时的盒子叠放顺序

语法：

/* 数值可以是正整数、负整数 和 0 */

选择器 {
    z-index: 1;
}

特点：

数值可以是正整数、负整数和 0，数值越大，盒子越靠上，数字后不能加单位
如果值相同，则按书写的先后顺序来排列，最后写的在最上方
只有定位的盒子才有 z-index 属性

::: details

<!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>
        .box {
            width: 300px;
            height: 200px;
        }
        .nav1 {
            position: absolute;
            top: 40px;
            left: 40px;
            z-index: 1;
            background-color: rgb(129, 78, 127);
        }
        .nav2 {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 0;
            background-color: rgb(199, 230, 26);
        }
        .nav3 {
            background-color: rgb(6, 230, 200);
        }

    </style>
</head>

<body>
    <div class="box nav1">1</div>
    <div class="box nav2">2</div>
    <div class="box nav3">3</div>

</body>

</html>

:::

2. 绝对定位盒子水平居中

加了绝对定位的盒子不能通过 margin: 0 auto 水平居中：

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

::: details

<!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>
        .nav1 {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: rgb(129, 78, 127);
        }

        .nav2 {
            width: 100px;
            height: 50px;
            position: absolute;
            background-color: rgb(199, 230, 26);
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -25px;
        }
    </style>
</head>

<body>
    <div class="box nav1">
        <div class="box nav2">绝对定位盒子水平居中</div>
    </div>
</body>
</html>

:::

3. 拓展

绝对定位和固定定位也和浮动类似：

行内元素添加绝对或者固定定位，可以直接设置高度和宽度；
块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小
浮动元素只会压住它下面标准流的盒子，不会压住标准流盒子里的文字或图片（文字环绕效果）
固定定位（绝对定位）会压住下面标准流所有的内容

::: details

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .banner {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 20px auto;
        }
        li {
            list-style: none;
        }
        .banner img {
            width: 520px;
            height: 280px; 
        }
        .prev,
        .next {
            position: absolute;
            width: 20px;
            height: 30px;
            top: 50%;
            margin-top: -15px;
            text-decoration: none;
            color: #fff;
            background-color: rgba(255, 252, 252, 0.3);
            line-height: 30px;
        }
        .prev {
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px; 
        }
        .next {
            right: 0;
            text-align: right;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px; 
        }
        .promo-nav {
            position: absolute;
            bottom: 15px;
            width: 70px;
            height: 14px;
            background-color: rgba(255, 252, 252, 0.3);
            left: 50%;
            margin-left: -35px;
            border-radius: 7px;
        }
        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            border-radius: 5px;
            background-color: #fff;
            margin: 3px;
        }
        .promo-nav .one {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="banner">
        <img src="https://img.pupper.cn/img/202111241153035.jpg" alt="">
        <a href="#" class="prev"> &lt; </a>
        <a href="#" class="next"> &gt; </a>
        <ul class="promo-nav">
            <li class="one"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>        
    </div>
</body>
</html>

:::

三、元素的显示与隐藏

1. 元素的显示与隐藏

属性	说明
`display: block`	除了转换为块元素外，同时还有显示元素的意思
`display: none`	隐藏元素（不占有原来的位置）
`visibility: visible`	显示元素
`visibility: hidden`	隐藏元素（占有原来的位置）

::: details

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .demo1,
        .demo2 {
            
            width: 400px;
            height: 200px;
        }
        .demo1 {
            border: 2px solid greenyellow;
        }
        .demo2 {
            border: 2px solid red;
        }
        .demo1 div {
            display: inline-block;
            width: 150px;
            height: 150px;
        }
        .demo1 .box1 {
            display: none;
            background-color: rgb(156, 155, 155);
        }
        .demo1 .box2 {
            background-color: rgb(231, 151, 151);
        }
        .demo2 div {
            display: inline-block;
            width: 150px;
            height: 150px;
        }
        .demo2 .box1 {
            visibility: hidden;
            background-color: rgb(156, 155, 155);
        }
        .demo2 .box2 {
            background-color: rgb(231, 151, 151);
        }

    </style>
</head>

<body>
    <div class="demo1">
        <div class="box1"></div>
        <div class="box2"></div>
        <p>display: none; 隐藏元素（**不占有** 原来的位置）</p>
    </div>
    <div class="demo2">
        <div class="box1"></div>
        <div class="box2"></div>
        <p>visibility: hidden;隐藏元素（**占有** 原来的位置）</p>
    </div>
</body>
</html>

:::

2. 隐藏溢出 (overflow)

overflow : 用于设置如果溢出一个元素框（超过高度或宽度）时，元素是否隐藏

属性值	描述
visible	不隐藏溢出内容
hidden	隐藏溢出内容
scroll	总显示滚动条
auto	超出时显示滚动条

::: warning
如果盒子有定位属性，不建议使用 overflow: hidden;，会将所有溢出全部隐藏，不方便布局
:::

案例二

::: details

<!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>
        * {
            margin: 0;
            padding: 0;
        }
		.demo1 {
			position: relative;
			width: 520px;
			height: 280px;
			margin: 20px auto;
		}
		.demo1 img {
			width: 520px;
			height: 280px;
		}
		#play {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 520px;
			height: 280px;
			background: rgba(0, 0, 0, 0.5) url(https://img.pupper.cn/img/202111241329939.png) no-repeat center;	
		}		
		.demo1:hover #play {
			display: block;
		}
		
    </style>
</head>

<body>                
    <div class="demo1">
		<div id="play"></div>
       <img src="https://img.pupper.cn/img/202111241153035.jpg" >
    </div>
</body>
</html>

:::

一、元素定位

1. 定位的组成

定位模式：

边偏移：

2. 静态定位（static）

3. 相对定位（relative）

4. 绝对定位（absolute）

5. 子绝父相

6. 固定定位（fixed）

7. 粘性定位（sticky）

二、定位的特性

1. 定位的叠放次序（z-index）

2. 绝对定位盒子水平居中

3. 拓展

案例（banner）

三、元素的显示与隐藏

1. 元素的显示与隐藏

2. 隐藏溢出 (overflow)

案例二