网页元素定位与视觉效果：position属性、z-index与透明度解析-CSDN博客

本文链接：https://blog.csdn.net/m0_70083523/article/details/127766600

文章目录

第八章定位网页元素

第八章定位网页元素

1、定位position属性：

偏移位置：top、left、right、bottom

<!-- 练习准备代码： -->
		<style>
            .bodydiv{
                width: 500px;
                height: 400;
            }
			.bodydiv div:first-child{
				background-color: burlywood;				
			}
			.bodydiv div:nth-child(2){
				background-color:blue;
				width: 100px;
			}
			.bodydiv div:last-child{
				background-color:green;
				
			}
		</style>
	</head>
	<body>
		<div class="bodydiv">
			<div id="first">第一个盒子</div>
			<div id="second">第二个盒子</div>
			<div id="third">第三个盒子</div>
		</div>
	</body>

在这里插入图片描述

static默认位置

默认值，没有定位，以标准流方式显示

relative相对定位

相对定位：相对于自身原来位置偏移。

<!-- 第三个盒子移动 -->
#third {
	background-color:#C5DECC;
	border:1px #395E4F dashed;
	position:relative;
	right:20px;
	bottom:30px;
}
<!-- 现在盒子向右移动20px,向下移动30px回到原来的位置。 -->

在这里插入图片描述

【值方向：】

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rSRpDCQ3-1667964667120)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\1656228435232.png)]$

相对定位元素的规律：

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来
可以把标准文档流中的元素及浮动元素盖在下边
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

浮动元素设置相对定位

<!-- 第二个盒子右浮动 -->		
#first {
    border:1px #B55A00 dashed;
    position:relative;
    right:20px;
    bottom:20px;
}
#second {
    border:1px #0000A8 dashed;
    float:right;
    position:relative;
    left:20px;
    top:-20px;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZpnn3c0-1667964667122)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\1656230083766.png)]$

absolute：绝对定位

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位会造成影响
元素位置发生偏移后，它原来的位置不会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

fixed：固定定位

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
固定定位的东西不会随滚动条的滚动而动
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

<style>
			body{
				height: 1000px;
			}
			div:nth-of-type(1) {  /*第一个div设置绝对定位*/
	            width: 100px;
	            height: 100px;
	            background: red;
	            position: absolute;
	            right: 0;
	            bottom: 0;
			}
			div:nth-of-type(2) {  /*第二个div设置固定定位*/
	            width: 50px;
	            height: 50px;
	            background: yellow;
	            position: fixed;
	            right: 0;
	            bottom: 0;
			}

</style>
	</head>
	<body>
		<!--固定定位的东西不会随滚动条的滚动而动-->
		<div></div>
		<div></div>
	</body>

2、z-index属性：

作用：调整元素定位时重叠的上下位置

z-index属性值：整数，默认值是0；
设置了position属性时，z-index属性可以设置各元素之间的高低关系
z-index值大的层位位于值小的层的上方

3、网页元素透明度：

属性	说明	举例
opacity:x	x值为0~1，值越小越透明，整个div都会变透明，包括文字	opacity:0.4;
filter:alpha(opacity=x)	x值为0~100，值越小越透明	filter:alpha(opacity=40);
rgbA	A的值为0~1	Alpha合成也叫阿尔法合成或透明合成