HTML---定位

news2024/11/19 5:45:54

文章目录

一.定位属性概述

二.position

基础数值

三.z-index属性

网页元素透明度

练习

一.定位属性概述

HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性，包括position、top、bottom、left和right等。

position属性指定了元素的定位方式，常用的取值有static、relative、absolute和fixed。通过设置不同的position值，可以实现元素的不同定位方式。
top、bottom、left和right属性用于精确地定位元素的位置。当position属性的值为relative时，这些属性参照的是元素自身的位置进行调整；当position属性的值为absolute或fixed时，这些属性参照的是最近的具有定位属性的父元素进行调整。

二.position

基础数值

position属性中的值
static	默认值，没有定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

演示案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{margin: 10px; padding: 5px; font-size: 15px; line-height: 25px;}
			#father{border: 1px solid red;padding: 0px;}
			#first{background-color: orange;border: 1px blue dashed;}
			#second{background-color: aqua;border: 1px gray dashed;}
			#third{background-color: aquamarine;border: 1px green solid;}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="first">第一个盒子</div>
			<div id="second">第二个盒子</div>
			<div id="third">第三个盒子</div>
	</body>
</html>

static

默认值，无定位

relative

相对定位：元素相对于其正常位置进行定位，可以通过top、right、bottom、left属性调整位置。

案例：

#first{
		background-color: orange;border: 1px blue dashed;
		position: relative;
		top: 100px;/**设置偏移量**/
}

相对定位中元素的原有位置会被保留，父级边框不会塌陷。相对定位中top：0px left：0px的坐标轴为元素本身。

absolute

绝对定位：设置绝对定位后的元素将处于悬浮状态。

案例：

#first{
		background-color: orange;border: 1px blue dashed;
		position: absolute;	
		}

结论：

绝对定位的元素会触发浮动：悬浮，剩余元素将自动补齐浮动元素的位置。

停留在浏览器的左上角

#first{
		background-color: orange;border: 1px blue dashed;
		position: absolute;	
		top: 0px;
		left: 0px;
		}

停留在上一级元素边框的左上角

#father{
		border: 1px solid red;padding: 0px;
		position: relative;
		}
#first{
		background-color: orange;border: 1px blue dashed;
		position: absolute;	
		top: 0px;
		left: 0px;
		}

结论：

绝对定位的top：0px left：0px 的坐标轴在上一级设置过元素的左上角，若没有则停留在浏览器左上角。

fixed

固定定位：

固定定位的元素不会随着浏览器的滚动而改变位置，但会脱离标准文档流，产生悬浮

案例：

#father{
		border: 1px solid red;padding: 0px;
		height: 1000px;
		}
#first{
		background-color: orange;border: 1px blue dashed;
		position: absolute;		
	}
#second{background-color: aqua;border: 1px gray dashed;}
#third{
	    background-color: aqua;border: 1px gray dashed; 
		position: fixed;
	}

停留在浏览器左上角

#third{
		background-color: aqua;border: 1px gray dashed; 
		position: fixed;
		top: 0px;
		left: 0px;
		}

三.z-index属性

在CSS中，z-index属性用于控制元素的堆叠顺序。它指定了一个元素在Z轴上的顺序，即元素在层叠元素堆里的垂直位置。

当两个或多个元素重叠时，z-index属性决定了哪个元素会显示在顶部。默认情况下，元素的堆叠顺序由它们在HTML中的出现顺序决定。后出现的元素会覆盖先出现的元素。

z-index属性的值可以是整数或auto。较高的值表示元素将显示在较低的值上面。

例如，如果一个元素A具有z-index值为2，而另一个元素B具有z-index值为1，那么元素A将显示在元素B上面。

网页元素透明度

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;				
			}
			ul{
				list-style: none;
				position: relative;
			}
			#content{
				width: 330px;
				overflow: hidden;
				padding: 5px;
				font-size: 12px;
				line-height: 25px;
				border: 1px red solid;	
				margin: 0 auto;/***设置边框居中*/
			}
			#l2,#l3{ /**id="l2"作为空列表属于块状元素需要设置高度否则会被下级元素覆盖**/
				position: absolute;
				width: 330px;
				height: 25px;
				top:100px
			}
			#l2{
				color: aliceblue;
				text-align: center;
				z-index: 0;
			}
			#13{}
			#l3{
				background-color: black;
				opacity:0.5;
				z-index: 1;
				
			}
		</style>
	</head>
	<body>
		<div id=content>
			<ul>
				<li>
					<img src="picture1.png"/>
				</li>
				<li id="l2">
					金秋魅力.相约共享香山红叶
				</li>
				<li id="l3"></li><!--设置一个空列表作为id="12"的背景列表-->
				<li>时间:2023年12月20日20:28:10</li>
				<li>地点:朝阳区西大望江路珠江帝景K区正门前集合</li>
			</ul>
		</div>
	</body>
</html>