CSS中更加高级的布局手段——定位之相对定位

2023-12-25 17:50:17

定位：
? ? ? ? - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素

? ? ? ? - 通过position属性来设置元素的定位

? ? ? ? ? ? ? ? -可选值：

? ? ? ? ? ? ? ? ? ? ? ? static： ['st?tik] 默认值，元素没有开启定位

? ? ? ? ? ? ? ? ? ? ? ? relative： ['rel?tiv] 开启元素的相对定位

? ? ? ? ? ? ? ? ? ? ? ? absolute： ['?bs?lju:t] 开启元素的绝对定位

? ? ? ? ? ? ? ? ? ? ? ? fixed：开启元素的固定定位（也是绝对定位的一种）

? ? ? ? ? ? ? ? ? ? ? ? sticky： ['stiki] 开启元素的粘滞定位

相对定位：
? ? ? ? 当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型

? ? ? ? ? ? ? ? 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

? ? ? ? ? ? ? ? 2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）

? ? ? ? ? ? ? ? 3.相对定位的元素不会脱离文档流

? ? ? ? ? ? ? ? 4.相对定位会使元素提升一个层级

? ? ? ? ? ? ? ? 5.相对定位不会改变元素的性质，块还是块，内联还是内联

偏移量：
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left ? ? ? ? right ? ? ? ? top ? ? ? ? bottom四个属性来设置元素的偏移量，越大越向反方向移动

? ? ? ? ? ? ? ? left：元素相对于其定位位置的左侧偏移量，

? ? ? ? ? ? ? ? right：元素相对于其定位位置的右侧偏移量

? ? ? ? ? ? ? ? top：元素相对于其定位位置的上边的偏移量

? ? ? ? ? ? ? ? bottom：元素相对于其定位位置下边的偏移量

通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				position: relative;
				left: 100px;
				top: 100px;	
			}
			
			.box3{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
				
			}
			
			.s1{
				position: relative;
				width: 200px;
				height: 200px;
				background-color: yellow;
				left: 100px;
			}
			
		</style>
		
	</head>
	<body>
		
		<!-- <div class="box1"></div> -->
		<div class="box2"></div>
		<div class="box3"></div>
		
		<span class="s1">我是一个span</span>
		
	</body>
</html>

文章来源:https://blog.csdn.net/csgojingyu/article/details/135138612
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。