相对定位
 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. ArrayList-源码分析-自动扩容机制
			
    ArrayList类: public class ArrayList....{ ...... private static final int DEFAULT_CAPACITY = 10; //默认容 ...
    
			
    2. 
						
  2. 【UE4 C++】UKismetMathLibrary 源代码
			
    // Copyright Epic Games, Inc. All Rights Reserved. #pragma once #include "CoreMinimal.h" # ...
    
			
    3. 
						
  3. Noip模拟41 2021.8.16
			
    T1 你相信引力吗 对于区间的大小关系问题,往往使用单调栈来解决 这道题的优弧和劣弧很烦,考虑将其等价的转化 由于所有的合法情况绕过的弧都不会经过最高的冰锥, 又因为环可以任意亲定起点,这样可以直接把 ...
    
			
    4. 
						
  4. NKOJ1828  Feed Ratios饲料调配
			
    题目 好题!高斯消元切了! (其实只是单纯地想吐槽这道出现在"高斯消元"专练里的题,暴搜能过,goudoubuxie"Gauss") 下面是暴搜: #pragm ...
    
			
    5. 
						
  5. BF算法和KMP算法
			
    这两天复习数据结构(严蔚敏版),记录第四章串中的两个重要算法,BF算法和KMP算法,博主主要学习Java,所以分析采用Java语言,后面会补上C语言的实现过程. 1.Brute-Force算法(暴力法 ...
    
			
    6. 
						
  6. python write() argument must be str, not bytes
			
    python pickle from __future__ import absolute_import from __future__ import division from __future__ ...
    
			
    7. 
						
  7. 访问单个结点的删除 牛客网 程序员面试金典 C++ Python
			
    访问单个结点的删除 牛客网 程序员面试金典 C++ Python 题目描述 实现一个算法,删除单向链表中间的某个结点,假定你只能访问该结点. 给定待删除的节点,请执行删除操作,若该节点为尾节点,返回f ...
    
			
    8. 
						
  8. PHP笔记4__函数/全局、静态变量/函数参数/加载函数库/，，
			
    <?php header("Content-type: text/html; charset=utf-8"); echo table(5,5); function table ...
    
			
    9. 
						
  9. cf 24 Game (观察+.. 想一想)
			
    题意: 给一个数N,从1到N. 每次取两个数,三种操作:加.减.乘,运算完得一个数,把那俩数删了,把这个数加进去. 重复操作N-1次. 问是否可能得到24.若可以,输出每一步操作. 思路: 小于4,不 ...
    
			
    10. 
						
  10. 就因为把int改成Integer，第2天被辞了
			
    本文节选自<设计模式就该这样学>之享元模式(Flyweight Pattern) 1 故事背景 一个程序员就因为改了生产环境上的一个方法参数,把int型改成了Integer类型,因为涉及到 ...
    
			
    11.