欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端学习——css的定位

程序员文章站 2024-01-25 22:15:40
...
<html>
	<head>
		<title>css的定位</title>
		<meta charset="UTF-8"/>
		<!--
			css的定位学习：
			position
			相对定位：relative 
			作用：相对元素原有位置移动指定的距离（相对自己的原有位置，可以使用top,left,right,bottom来进行设置
			其他元素位置是不改变的
			绝对定位：absolute
			作用：可以使元素参照界面或者相对父元素进行移动
			固定定位：fixed
			作用：将元素固定显示再页面的指定位置，不会随着滚动条的滚动改变位置
			以上定位都可以使用top,left,right,bottom来进行移动
			z-index:此属性是用来声明元素的显示级别的
		-->
		<style type="text/css">
			#div01{
			border: dashed 2px red;
			width: 800px;
			height: 200px;	
			margin-top: 50px;
			/*position: relative;/*给div01添加相对丁文成为其子元素绝对定位的参照元素*/
			}
		
		#showdiv{
			border: dashed 2px;
			height: 50px;
			width: 50px;
			position: absolute;
			top: 10px;/*相对于Body 如果让它相对于父级div01移动，则将div01加相对position:relative*/
			
			}
		#div02{
			border: dashed 2px yellowgreen;
			width: 800px;
			height: 200px;	
			position: relative;
			background-color: #8A2BE2;
			margin-bottom: 10px;
			left: 50px;
			top: 100px;
			z-index: 1;
			}
			#div03{
			border: dashed 2px blueviolet;
			width: 800px;
			height: 200px;	
			background-color: brown;
			position: relative;
			z-index: 2;
			}
		   #div04{
			border: dashed 2px darkgoldenrod;
			width: 40px;
			height: 40px;	
			background-color: darkgoldenrod;
			right: 100px;
			top: 100px;
			position: fixed;
		
			}
			
		</style>
	</head>
	<body>
		<div id="div01">
		<div id="showdiv">
			
		</div>
	     </div>
	<div id="div02">
			
	</div>
	<div id="div03">
			
	</div>
	</div>
	<div id="div04">
			
	</div>
	</body>
	<br /> 	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />
 </html>

效果展示：

前端学习——css的定位

上一篇： 基本排序方式——（四）堆排序

下一篇： 二叉树的直径

推荐阅读