相对定位
 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">

 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7     <title>Document</title>

 8     <style>

 9         .box1{

10             width: 200px;

11             height: 200px;

12             background-color: #bfa;

13

14         }

15         .box2{

16             width: 200px;

17             height: 200px;

18             background-color: tomato;

19            /* 定位(position)

20                -定位是一种更加高级的布局手段

21             -通过定位我们可以将元素摆放在页面的任意位置

22             -使用position设置定位

23             可选值：

24             satatic 默认值  ：元素是静止的 没有开启定位

25             relative 相对定位

26             absolute 绝对定位

27             fixed  固定定位

28             sticky 粘滞定位

29         -相对定位（相对定位是相对于其本身原来的位置进行定位）

30            -当元素的position设置为relative

31            -相对定位的特点：

32            1、开启相对定位以后，如果不设置偏移量元素不会发生任何变化

33            2、相对定位是参照元素在文档流中的位置进行定位的

34            3、相对定位会提升元素的层级

35            4、相对定位不会使元素脱离文档流

36            6、相对定位不会改变元素的性质，块还是块，行内还是行内

37            偏移量(offset)

38            -当元素开启了定位以后，可以通过偏移量来设置元素的位置

39               top

40                 -定位元素和定位位置上边的距离

41               bottom

42                 -定位元素和定位位置下边的距离

43

44                 -定位元素垂直方向的位置由top和bottom两个属性来控制

45                     通常情况下我们只会使用其中之一

46                 -top值越大，定位元素越向下移动

47                 -bottom值越大，定位元素越向上移动

48               left

49               -定位元素和定位位置左侧的距离

50               right

51               -定位元素和定位位置右侧的距离

52

53               -定位元素水平方向的位置由left和right两个属性确定

54                 通常情况下只会使用一个

55                 -left越大元素越靠右

56                 -right越大元素越靠左

57            */

58            position: relative;

59            left: 200px;

60            top: -200px;

61

62         }

63         .box3{

64             width: 200px;

65             height: 200px;

66             background-color: greenyellow;

67

68         }

69     </style>

70 </head>

71 <body>

72     <div class="box1">1</div>

73     <div class="box2">2</div>

74     <div class="box3">3</div>

75 </body>

76 </html>
相对定位是相对于元素本身的原始位置进行定位


 


												


											
HTML四种常见的定位-相对定位的更多相关文章
	

    
								
  1. 四种常见的APP分类界面布局设计案例学习
		
    相信各位对于APP设计,已经很熟练啦.如何在熟练的基础上提高我们界面的优美度,或者是进行APP界面的迭代设计. 重构APP设计布局是我们必须要经历的一个过程. 在之前,学习UI设计的时候,经常要接触到 ...
    
		
    2. 
						
  2. 四种常见的App弹窗设计,你有仔细注意观察吗?
		
    弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...
    
		
    3. 
						
  3. (转)四种常见的 POST 提交数据方式
		
    四种常见的 POST 提交数据方式(转自:https://imququ.com/post/four-ways-to-post-data-in-http.html) HTTP/1.1 协议规定的 HTT ...
    
		
    4. 
						
  4. 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现
		
    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
    
		
    5. 
						
  5. 一文读懂四种常见的XML解析技术
		
    之前的文章我们讲解了<XML系列教程之Schema技术_上海尚学堂java培训技术干货><XML的概念.特点与作用.XML申明_上海Java培训技术干货>,大家可以点击回顾一下 ...
    
		
    6. 
						
  6. 四种常见的 POST 提交数据方式（application/x-www-form-urlencoded，multipart/form-data，application/json，text/xml）
		
    四种常见的 POST 提交数据方式(application/x-www-form-urlencoded,multipart/form-data,application/json,text/xml) 转 ...
    
		
    7. 
						
  7. application/json 四种常见的 POST 提交数据方式
		
    四种常见的 POST 提交数据方式   HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中  ...
    
		
    8. 
						
  8. 转：application/json 四种常见的 POST 提交数据方式
		
    四种常见的 POST 提交数据方式 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 PO ...
    
		
    9. 
						
  9. POST提交数据时四种常见的数据格式
		
    最近项目部署到新环境tomcat+mysql,想看看项目部署成功没有,就用soupui调对应接口开测试,soupui使用比较简单,给上接口地址,入参xml报文,把入参的media Type设置为app ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python中的load、loads实现反序列化
			
    load与loads 简介: 在python自动化中,我们传递一些参数是需要从文件中读取过来的,读取过来的字典并非python对象数据类型而是string类型. 这样在我们传递参数的时候就会出现格式不 ...
    
			
    2. 
						
  2. netty系列之:让TLS支持http2
			
    目录 简介 TLS的扩展协议NPN和ALPN SslProvider ApplicationProtocolConfig 构建SslContext ProtocolNegotiationHandler ...
    
			
    3. 
						
  3. 2020年09月15日-项目开发-python二次处理代码文件
			
    Caterpillar通过将BPMN生成为solidity代码后, 我需要对solidity代码做二次处理,即在其中的特定函数中插入event类型,以便去做事件监听. 最终生成的不仅包括solidit ...
    
			
    4. 
						
  4. 初学python写个自娱自乐的小游戏
			
    一.摘要 当编写完后的代码执行第一次后达到了目标的预期效果,内心有些许满足,但是当突发情况产生后,程序便不能正常运行,于是准备从简单的版本开始出发,综合考虑使用者的需求,和使用过程中会遇到的问题,一步 ...
    
			
    5. 
						
  5. SLAM名词介绍
			
    gauge freedom:测量自由度 degrees-of-freedom(DoF) 自由度 wide-baseline matches:宽基线匹配 宽基线匹配:从描绘同一场景的两个或多个图像中建立 ...
    
			
    6. 
						
  6. [对对子队]会议记录4.21(Scrum Meeting12)
			
    今天已完成的工作 吴昭邦 ​ 工作内容:基本实现改变顺序合成 ​ 相关issue:实现流水线合成系统的逻辑 ​ 相关签入:4.21签入1 梁河览 ​ 工作内容:修改设置界面bug ​ 相关签入:4.2 ...
    
			
    7. 
						
  7. TCP/IP参考模型（应用层、传输层、网际层、网络接口层）、五层参考模型（应用层、传输层、网络层、数据链路层、物理层）、OSI与TCP/IP参考模型比较
			
    文章转自:https://blog.csdn.net/weixin_43914604/article/details/104597450 学习课程:<2019王道考研计算机网络> 学习目的 ...
    
			
    8. 
						
  8. GPS与AGPS定位服务
			
    最近客户反馈车子启动从车库开到地面后,机器定位相对OBD内部定位会慢很多. 机器定位主要依赖定位模块 + AGPS辅助定位. 其中定位模块目前主流支持的有以下三种定位系统. 一.GPS(全球定位系统) ...
    
			
    9. 
						
  9. 旋转数组的最小数字 牛客网 剑指Offer
			
    旋转数组的最小数字 牛客网 剑指Offer 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4, ...
    
			
    10. 
						
  10. 2021CCPC河南省赛（部分代码待更）
			
    最终A了8道题, 喜提一金, 也是在意料之中. 第一次三个队友集中在一起打比赛, 也体验了一下线下的氛围, 还是比较赞的, 自己也不是说毫无作用, 帮助团队做了几道题, 还是挺满意的. 1002 em ...
    
			
    11.