CSS学习之定位

最新推荐文章于 2023-07-26 08:43:28 发布

playboy-jordan

最新推荐文章于 2023-07-26 08:43:28 发布

阅读量114

点赞数

分类专栏： # CSS教程文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/weixin_44853669/article/details/106818049

版权

CSS教程专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>css的定位</title>
		<meta charset="UTF-8"/>
		<!--
			css的定位学习：
				position
					相对定位:relative
						作用：相对元素原有位置移动指定的距离(相对的自己的原有位置)
							可以使用top,left,right,bottom来进行设置。
						注意：
							其他元素的位置是不改变的。
					绝对定位:absolute
						作用：可以使用元素参照界面或者相对父元素来进行移动 	
						注意：
							如果父级元素成为参照元素，必须使用相对定位属性
							默认情况下是以界面为基准进行移动的。
					固定定位:fixed
						作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。
					以上定位都可以使用top,left,right,bottom来进行移动。
				z-index:此属性是用来声明元素的显示级别的。
		-->
		<!--声明css代码域-->
		<style type="text/css">
		/*给div01添加样式*/
			#div01{
				border: solid 2px orange;
				height: 200px;
				width: 800px;
				margin-bottom: 10px;
				margin-top: 50px;
				position: relative;/*给div01添加相对定位成为其子元素绝对定位的参照元素*/
			}
			/*给showdiv添加样式*/
			#showdiv{
				border: solid 3px;
				height: 50px;
				width: 50px;
				position: absolute;
				top:10px;
			}
		/*给div02添加样式*/
			#div02{
				border: dashed 2px coral;
				height:200px;
				width: 800px;
				margin-bottom: 10px;
				position: relative;/*使用相对定位*/
				left:50px;
				top:100px;
				background-color: coral;
				z-index: 3;
			}
		/*给div03添加样式*/
			#div03{
				border: solid 2px #FF7F50;
				height: 200px;
				width: 800px;
				background-color: gray;
				position: relative;
				z-index: 4;
			}
		/*给div04添加样式*/
			#div04{
				border: solid 3px blue;
				height: 50px;
				width: 50px;
				position: fixed;
				top:270px;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<div id="div01">
				<div id="showdiv">
					
				</div>
		</div>
		<div id="div02">我是div02</div>
		<div id="div03"></div>
		<div id="div04">
			
		</div>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html>

在这里插入图片描述

playboy-jordan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习之定位

<html> <head> <title>css的定位</title> <meta charset="UTF-8"/> <!-- css的定位学习： position 相对定位:relative 作用：相对元素原有位置移动指定的距离(相对的自己的原有位置) 可以使用top,left,right,bottom来进行设置。注意：其他元素的位置是不改变的。
复制链接

扫一扫