css知识小汇（5）——定位

最新推荐文章于 2023-12-06 13:38:04 发布

木鱼非鸟

最新推荐文章于 2023-12-06 13:38:04 发布

阅读量54

点赞数

分类专栏： html、css、js

本文链接：https://blog.csdn.net/weixin_45734378/article/details/113538148

版权

html、css、js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

- 定位

定位

相对定位

position: relative;

（距离右边）right、left、top、bottom

相对于元素原来的位置进行定位且元素不会脱离文档流，原位置仍然保留，使元素提升一个层级。

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father{
				height: 40px;
				border: 1px solid red;
			}
			#d1{
				height: 10px;
				border: 1px solid greenyellow;
				background-color: #ADFF2F;
				position: relative;
				right: 5px;
			}
			#d2{
				height: 10px;
				border: 1px solid greenyellow;
				background-color: #BC8F8F;
				position: relative;
				left: -10px;
			}
			#d3{
				height: 10px;
				border: 1px solid greenyellow;
				background-color: aqua;
				position: relative;
				top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="d1"></div>
			<div id="d2"></div>
			<div id="d3"></div>
		</div>
	</body>

绝对定位

position: absolute

会脱离文档流，即不会保留原来位置。

如果祖先元素都没有开启定位，则相对于浏览器定位，一般情况下父元素开启相对定位，会相对于父元素定位。

绝对定位会改变元素的性质，即块元素会成为内联元素，内联元素会成为块元素。

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father{
				padding: 10px;
				border: 1px solid red;
				position: relative;
			}
			#d1{
				height: 30px;
				border: 1px solid greenyellow;
				background-color: #ADFF2F;
				position: absolute;
				left: 35px;
			}
			#d2{
				height: 30px;
				border: 1px solid greenyellow;
				background-color: #BC8F8F;
				position: absolute;
                /*距离父元素右边10px*/
				right: 10px;
			}
			#d3{
				height: 30px;
				border: 1px solid greenyellow;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="d1">d1</div>
			<div id="d2">d2</div>
			<div id="d3">d3</div>
		</div>
	</body>

固定定位

position: fixed;

永远相对于浏览器定位，不随滚动条滚动

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#father{
				height: 1000px;
				background-color: black;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: #ADFF2F;
				position: absolute;
				right: 0px;
				bottom: 0px;
			}
			#d2{
				width: 50px;
				height: 50px;
				background-color: #00FFFF;
				position: fixed;
				right: 0px;
				bottom: 0px;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="d1">absolute</div>
			<div id="d2">fixed</div>
		</div>
	</body>

层级和透明度

z-index 没有开启定位的元素不能使用父元素层级再高也不能盖住子元素

opacity 透明度 0-1之间

( IE8及以下设置 filter: alpha(opacity=透明度) ) 透明度0-100

	<head>
		<meta charset="UTF-8">
		<title></title>
        <style type="text/css">
        	.box1{
        		width: 100px;
        		height: 100px;
        		background-color: wheat;
        		position: relative;
        		z-index: 2;
        		opacity: 0.5;
        	}
        	.box2{
        		width: 100px;
        		height: 100px;
        		background-color: darkblue;
        		position: absolute;
        		left: 70px;
        		z-index: 10;   /*可以设置层级,前提是开启定位*/
        		opacity: 0.6;
        	}
        	.box3{
        		width: 100px;
        		height: 100px;
        		background-color: cadetblue;
        		position: relative;
        		left: 50px;
        		top: -50px;
        		z-index: 20;               /* 父元素层级再高都不会盖住子元素*/
        		opacity: 0.6;
        	}
        	.box4{
        		width: 80px;
        		height: 90px;
        		background-color: black;
        		position: absolute;
        		z-index: 10;
        		opacity: 0.8;	
        	}
        </style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3">
			<div class="box4">
			</div>
		</div>
	</body>

如有不对的地方欢迎指出，大家共同进步！

木鱼非鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css知识小汇（5）——定位

文章目录定位相对定位绝对定位固定定位层级和透明度定位相对定位position: relative;（距离右边）right、left、top、bottom相对于元素原来的位置进行定位且元素不会脱离文档流，原位置仍然保留，使元素提升一个层级。 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #father{ height:
复制链接

扫一扫