4-3相对定位的用途

最新推荐文章于 2022-08-11 19:06:55 发布

liu1992452008

最新推荐文章于 2022-08-11 19:06:55 发布

阅读量237

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/liu1992452008/article/details/75331843

版权

HTML 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

2.3 相对定位用途
相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：
1） 微调元素
2） 做绝对定位的参考，子绝父相（讲绝对定位的时候说）
.txt{
			font-size: 30px;
		}
		.btn{
			position: relative;
			top: 4px;
			left: 0;
		}
<p>
		<input type="text" class="txt"/>
		<input type="button" class="btn" value="我是一个小按钮" />
	</p>
 
2.4 相对定位的定位值
可以用left、right来描述盒子右、左的移动；
可以用top、bottom来描述盒子的下、上的移动。
Top/bottom;left/right只能同时存在一个
↘：
  
  1 position: relative;
2 top: 10px;
3 left: 40px;
 
↙：
  
  1 position: relative;
2 right: 100px;   → 往左边移动
3 top: 100px;
 
↖：
  
  1 position: relative; 
2 right: 100px;
3 bottom: 100px;    → 移动方向是向上。
 
↗：
  
  1 position: relative;
2 top: -200px;       → 负数就是相同的方向，如果是正，就是下边，如果是负数就是上边
3 right: -200px; 
 
↗：
  
  1 position: relative;
2 right: -300px;
3 bottom: 300px;
完全等价于：
  
  4 position: relative;
5 left: 300px;
1 bottom: 300px;
 
在原本的位置上，距top/bottom/left/right的距离增大100px；
 
 
 
如图，有几种相对定位的移动方法？
 
方法1：
  
  1 position:relative;
2 top:100px;
3 left:200px;
方法2：
  
  1 position:relative;
2 bottom:-100px;
3 right:-200px;
方法3：
  
  1 position:relative;
2 top:100px;
3 right:-200px;
方法4：
  
  1 position:relative;
2 bottom:-100px;
3 left:200px;

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*        相对定位的用途：做位置的调整*/
        
        .btn {
            position: relative;
            top: 30px;
            right: 180px;
        }
    </style>
</head>


<body>
    <p>
        <input type="text" class="txt" />
        <input type="button" class="btn" value="我是一个小按钮" />
    </p>
</body>


</html>