HTML5学习_day06(2)--html之相对定位

最新推荐文章于 2022-09-01 11:18:30 发布

woaiwanshumen

最新推荐文章于 2022-09-01 11:18:30 发布

阅读量871

点赞数

分类专栏： HTML5零基础学习笔记文章标签： html5 相对定位

本文链接：https://blog.csdn.net/woaiwanshumen/article/details/52681475

版权

HTML5零基础学习笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

相对定位就是相对于自己原来的位置只是内容偏移了而已

并且原有占用的空间依旧存在不会被其他元素填充

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相对定位</title>
		<style type="text/css">
			#div{
				width: 1000px;
				border: 3px solid red;
			}
			#div div{
				width: 200px;
				height: 200px;
				border: 4px solid;
				display: inline-block;
			}
			/*#div .div1{
				position: relative;
				left: 230px;			
				right:100px;  优先级 left>right  top>bottom
				top:100px;
				bottom: 100px;	
				margin-left:50px;
				
			}*/
			
			/*
			
			 问题一
			   #div .div1{
				position: relative;	
				top:50px;
				margin-top: 100px;  这样设置会整体下移  要重新设置对齐方式 vertical-align: top;
			}*/
			
		</style>
	</head>
	<body>
		<!--1.什么是相对定位(参考点永远是自身的左上角)
		也就是相对于自己在文档流中的位置进行定位。
		
		2.相对定位的几个特性
		1.不脱离文档流，原有位置空间被保留
		2.不影响元素本身属性的设置
		4.如果给元素设置了相对定位胆不设置偏移量，元素本身就不受任何影响的。
		-->
		<div id="div">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
			<div class="div4">div4</div>
		</div>
		<!--注意：
		1.如果一个定位元素，同时设置了top和bottom，top的优先级更高，会显示top设置的值。
		2.一个定位元素，如果同时设置了left和right,那么优先级取决于网站语言，在英语网页中left优先级更高，在阿拉伯语言的网页中right优先级更高
		3.如果一个元素设置了定位(甚至是偏设置了移)，其他元素在排版的参考的依然是那个元素的原有位置(没有设置偏移的位置)
		4.如果一个元素设置了相对定位，原有位置空间被保留，即使该元素做偏移，其他元素也不会占据他原有(偏移前)的位置。-->
		
		z-index:默认是0;
	</body>
</html>

woaiwanshumen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习_day06(2)--html之相对定位

相对定位就是相对于自己原来的位置只是内容偏移了而已并且原有占用的空间依旧存在不会被其他元素填充相对定位 #div{ width: 1000px; border: 3px solid red; } #div div{ width: 200px; height: 200px; border: 4px so
复制链接

扫一扫