9.定位

Pupper大约 10 分钟学习笔记前端基础CSS

一、元素定位

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

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）

语法：

选择器 {
	position: static;
}

特性：

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

3. 相对定位（relative）

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

语法：

选择器 {
	position: relative;
}

特性:

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

详情

<!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）

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

语法：

选择器 {
	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>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. 子绝父相

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

特点：

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

详情

<!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）

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

语法：

选择器 {
	position: fixed;
}

特点：

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

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

详情

<!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）

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

语法：

选择器 {
	position: sticky;
}

特点：

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

详情

<!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 属性

详情

<!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;: 让盒子向左移动自身宽度的一半。

详情

<!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. 拓展

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

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

详情

<!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`	隐藏元素（占有原来的位置）

详情

<!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	超出时显示滚动条

注意

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

案例二

详情

<!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>