第七章 CSS定位网页元素

最新推荐文章于 2023-04-14 20:52:41 发布

斑马有点困

最新推荐文章于 2023-04-14 20:52:41 发布

阅读量167

点赞数

分类专栏： # web前端笔记文章标签： css css3 前端 html html5

本文链接：https://blog.csdn.net/qq_36827283/article/details/125186905

版权

笔记同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

web前端

14 篇文章 0 订阅

订阅专栏

定位网页元素

定位在网页中的应用

在这里插入图片描述

position属性

static：默认值，没有定位

在这里插入图片描述

relative：相对定位

relative属性值
相对自身原来位置进行偏移
偏移设置：top、left、right、bottom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style>
			div{
				height: 100px;
				width: 500px;
			}
			.a{
				background-color: aqua;
			}
			.b{
				background-color:brown;
				/*相对定位*/
				position: relative;
				/*相对于有定位的父元素,左边的距离*/
				left: 500px;
				top: -100px;
			}
			.c{
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<div class="a">
			
		</div>
		<div class="b">
			
		</div>
		<div class="c">
			
		</div>
	</body>
</html>

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来

absolute：绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style>
			div{
				height: 100px;
				width: 500px;
			}
			.a{
				background-color: aqua;
			}
			.b{
				background-color:red;
				/*绝对定位*/
				position: absolute;
				top: -50px;
				left: 500px;
			}
			.c{
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<div class="a">
			
		</div>
		<div class="b">
			
		</div>
		<div class="c">
			
		</div>
	</body>
</html>

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位会造成影响
元素位置发生偏移后，它原来的位置不会被保留下来

经验:设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况

fixed：固定定位

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定定位</title>
		<style>
		
			.a{
				height: 100px;
				width: 100px;
				background-color: red;
				/*固定定位*/
				position: fixed;
				top: 50px;
			}
			
			.c{
				background-color:yellowgreen;
				height: 50000px;
			}
		</style>
	</head>
	<body>
		<div class="a">
			
		</div>
		<div class="b">
			
		</div>
		<div class="c">
		</div>
	</body>
</html>

小结

相对定位的特性
相对于自己的初始位置来定位
元素位置发生偏移后，它原来的位置会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

绝对定位的特性
绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
元素位置发生偏移后，原来的位置不会被保留
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
设置绝对定位的元素脱离文档流

绝对定位的使用场景

一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

固定定位的特性
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

z-index属性

调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>z-index</title>
		<style>
			div{
				height: 200px;
				width: 400px;
			}
			.d1{
				background-color: red;
				position: relative;
				z-index: 18;/*有定位才有作用*/
			}
			.d2{
				background-color: blue;
				position: absolute;
				top: 100px;
				left: 50px;
				z-index: 9;
			}
		</style>
	</head>
	<body>
		<div class="d1"></div>
		<div class="d2">
			
		</div>
	</body>
</html>

透明度

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>z-index</title>
		<style>
			div{
				height: 200px;
				width: 400px;
			}
			.d1{
				background-color: red;
				position: relative;
				z-index: 18;/*有定位才有作用*/
				opacity: 0.8;/*透明度*/
			}
			.d2{
				background-color: blue;
				position: absolute;
				top: 100px;
				left: 50px;
				z-index: 9;
			}
		</style>
	</head>
	<body>
		<div class="d1"></div>
		<div class="d2">
			
		</div>
	</body>
</html>