CSS 定位(position) （三）

最新推荐文章于 2024-06-25 00:01:01 发布

_wjl_

最新推荐文章于 2024-06-25 00:01:01 发布

阅读量307

点赞数

分类专栏： web前端文章标签：鼠标经过显示二维码

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，
其取值可为正整数、负整数和0。
比如： z-index: 2;

注意：
z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，
亦不可指定此属性。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>叠放次序</title>
	<style>
	div {
		width: 200px;
		height: 200px;
		background-color: pink;
		position: absolute; /*  绝对定位 */
		top: 0;
		left: 0;
	}
	div:first-child {
		z-index: 1; /* font-weight: 700; */
	}
	div:nth-child(2) {
		background-color: purple;
		top: 30px;
		left: 30px;
		z-index: 2;
	}
	div:nth-child(3) {
		background-color: skyblue;
		top: 60px;
		left: 60px;
	}

	</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

在这里插入图片描述

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

定位模式转换

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位盒子的模式转换</title>
	<style>
	div {
		height: 100px;
		background-color: pink;
		 /*  float: left;   没有给盒子的宽度 浮动的盒子有模式转换的情况 转换位 行内块 */
		/* position: fixed;  元素添加了 绝对定位和固定定位之后 
		元素模式也会发生转换 都转换位 行内块模式 */
	}
	span {
		background-color: purple;
		width: 100px;
		height: 100px;
		/* float: left; 如果盒子本身就需要添加 浮动后者绝对固定定位就需要转换了 */
		position: absolute;
	}
	</style>
</head>
<body>
	<div>定位盒子的模式转换</div>
	<span>行内元素</span>
</body>
</html>

元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！

display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，
同时还有显示元素的意思。

特点： 隐藏之后，不再保留位置。

visibility 可见性

设置或检索是否显示对象。
visible : 　对象可视
hidden : 　对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素的显示和隐藏</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
	}
	div:first-child {
		/* 隐藏元素 不是删除 看不见了而已 
		但是元素一直存在页面中 但是不保留位置 block 显示 */
		/* display: none; */

		/* 隐藏元素 他和display none 最大的区别是 他保留位置 visible 显示 */
		visibility: hidden;
	}
	div:nth-child(2) {
		background-color: skyblue;
	}
	</style>
</head>
<body>
	<div></div>
	<div></div>
</body>
</html>

在这里插入图片描述

鼠标经过显示二维码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标经过显示二维码</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		border-color: pink;
		text-align: center;
		line-height: 100px;
		margin: 100px auto;
		position: relative; /* 子绝父相 */
	}
	div img {
		position: absolute;
		left: 100px;
		top: 0;
		display: none; /* 隐藏二维码 */
	}
	div:hover img {  /* 鼠标经过div的时候 里面那个img 图片会显示出来 */
		display: block; /* 显示二维码 */
	}
	</style>
</head>
<body>
	<div>
	    扫码登录
	    <img src="images/erweima.png" alt="">
	</div>
</body>
</html>

在这里插入图片描述

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。
auto : 　 超出自动显示滚动条，不超出不显示滚动条
hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 　不管超出内容否，总是显示滚动条

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>overflow属性</title>
	<style>
	div {
		width: 100px;
		height: 200px;
		border: 1px solid red;
		 /*overflow: visible;  默认的 超出显示 */
		/*  overflow: auto; 自动 超出就显示滚动条 不超出不显示 */
		/* overflow: scroll;  一直显示滚动条 */
		overflow: hidden; /* 溢出隐藏 */
	}
	</style>
</head>
<body>
	<div>
	  俄宇航员在国际空间站外面捡垃圾，捞了条漂了10年的毛巾
	  俄宇航员在国际空间站外面捡垃圾，捞了条漂了10年的毛巾
	  俄宇航员在国际空间站外面捡垃圾，捞了条漂了10年的毛巾
	</div>
</body>
</html>

在这里插入图片描述

_wjl_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 定位(position) （三）

叠放次序（z-index）当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。比如： z-index: 2;注意：z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。如果取值相同，则根据书写顺序，后来居上。后面数字一定不能加单位。只有...
复制链接

扫一扫

专栏目录