position和float都可以有宽高

最新推荐文章于 2022-07-11 21:38:27 发布

原创最新推荐文章于 2022-07-11 21:38:27 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

前端学习回顾专栏收录该内容

24 篇文章

订阅专栏

本文详细解析了CSS中不同类型的定位方式，包括相对定位、绝对定位、固定定位等，并探讨了它们如何影响元素的位置及与其他元素的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
	   <!--
	     绝对定位和绝对定位都可以让元素处于不同层次；
		 通过z-index:制定层次；
		 验证：根据相邻已经定位的父元素进行定位；
	   -->
	   <style type="text/css"> 
	     body{padding:0px;margin:0px;}
		  
		 #f_3{width:300px;height:300px;background-color:yellow;margin-left:100px;
		 position:relative;top:0px;left:10px;
		 } 
		 #f_1{width:300px;height:300px;background-color:yellow;margin-left:500px;float:left;/*position:absolute;*/}
		 #f_4{width:50px;height:50px;background-color:blue;position:absolute;top:5px;left:50px;}
		 #f_2{width:50px;height:50px;background-color:blue;position:absolute;top:5px;left:50px;}
		 .span_1{
			width:100px;
			height:100px;
			border:1px solid red;
		 }
		 .span_2{
			width:100px;
			height:100px;
			position:absolute;
			border:1px solid red;
		 }
		 .span_3{
			width:100px;
			height:100px;
			float:left;
			border:1px solid red;
		 }
		  .div_1{
			width:100px;
			height:100px;
			border:1px solid blue;
		 }
		  .div_2{
			width:100px;
			height:100px;
			position:absolute;
			border:1px solid blue;
		 }
		 .div_3{
			width:100px;
			height:100px;
			float:left;
			border:1px solid blue;
		 }
	   </style>
	
	</head>
	<body>
	   <p>div运用的position后，以相邻父元素（相邻父元素是以position定位）定位的，
		  如果父元素div没有用position，则以body为父元素定位；</p>  
	    <div id="f_3">父元素为position定位
		  <div id="f_4"></div>
		</div>
		 <div id="f_1">父元素未使用position定位
		  <div id="f_2"></div>
		</div>
		
	   <span class="span_1">普通span行元素</span>
	   <span class="span_2">加了position的span行元素</span>
	   <span class="span_3">加了float浮动的span行元素</span>	   
	</body>
</html>

	脱离文档	原占位保留	清除方式	z-index属性
浮动(float)	是	否	clear:both	不支持
相对定位(relative)	否	是	position:static	支持
绝对定位(absolute)	是	否	position:static	支持
固定定位(fixed)	是	否	position:static	支持
静态定位(static)	否	是		不支持