小问题|青训营笔记

112 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第10天。

浏览网页的时候常会看到“用户代理样式”,会改变我们的一些样式,看到用户代理样式说明正在使用浏览器默认样式。
用户代理样式用于满足“一般显示期望”的方式显示页面,例如默认样式表将为诸如字体大小、边框等内容提供基本样式。
那么怎么才能不使用默认样式-----在页面第一行加上``即可

Z-index属性-----是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系(即元素堆叠顺序)。
运用方法:属性值有auto(默认值为0)|number(自定义;无单位的整数值,可为负数)
z-index值较大的元素将叠加在z-index值较小的元素之上。
此外z-index属性适用于定位元素position属性值为relative|absolute|fixed,其他的标准流、浮动流、静态定位都没有这个属性,也不可用此属性。
注意自定义的数字后边不可加单位。
下面看一段代码示例:
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
			}
			.first {
				background-color: blue;
				position: fixed;
	
			}
			.second {
				background-color: yellow;
				position: fixed;
				left: 100px;
				z-index: 1;
			}
			.third {
				background-color: tomato;
				position: fixed;
				left: 200px;
                                z-index: 2;
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
		<div class="third"></div>
	</body>
</html>

展示效果图片为:

image.png 也可根据需求自己尝试其他属性值,效果会不同。