HTML---定位

目录

文章目录

一.定位属性概述

二.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	固定定位

演示案例： 

	
		
		
		
	
	
		

			
第一个盒子
			
第二个盒子
			
第三个盒子
	

• 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上面。

 网页元素透明度

 案例：

	
		
		
		
	
	
		

			

				

					
				
				

					金秋魅力.相约共享香山红叶
				
				

				
时间:2023年12月20日20:28:10
				
地点:朝阳区西大望江路珠江帝景K区正门前集合
			
		
	

---

练习