绝对定位

 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             /* 绝对定位

20

21               --当元素的position设置为absolute

22               -绝对定位的特点：

23                  1、开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化

24                  2、开启绝对定位后，元素会从文档流中脱离

25                  3、绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

26                  4、绝对定位会使元素提升一个层级

27                  5、绝对定位元素是相对于其包含块进行定位的

28

29                    包含块(containing block)

30                       -正常情况下：

31                         包含块就是离当前元素最近的祖先块元素

32                     -绝对定位的包含块：

33                      包含块就是离他最近的开启了定位的祖先元素

34                        如果所有的祖先元素都没有开启定位 则根元素就是它的包含块

35                        -html(根元素、初始包含块)

36               */

37           position: absolute;

38           bottom: 0;

39           right: 0;

40         }

41         .box3{

42             width: 200px;

43             height: 200px;

44             background-color: greenyellow;

45

46         }

47         .box4{

48             width: 400px;

49             height: 400px;

50             background-color: rgb(47, 61, 255);

51            position: relative;

52         }

53         .box5{

54             width: 300px;

55             height: 300px;

56             background-color: rgb(201, 14, 145);

57             /* position: relative; */

58

59         }

60     </style>

61 </head>

62 <body>

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

64     <div class="box4">

65         4

66         <div class="box5">

67             5

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

69         </div>

70     </div>

71

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

73 </body>

74 </html>
绝对定位是对于包含块而言的 其祖先元素应设置position：relative;    
则会相对于对应已经设置position进行绝对定位，如果都没设置则会对于body，最后相对于HTML，也就是说位于页面的最左上角。



 


												


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

    
								
  1. CSS四种定位及应用
		
    定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...
    
		
    2. 
						
  2. css四种定位
		
    概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...
    
		
    3. 
						
  3. CSS的四种定位的参照物
		
    一.static定位 HTML 元素的默认值,即没有定位,遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, right影响. <!DOCTYPE html&g ...
    
		
    4. 
						
  4. HTML四种定位-固定定位
		
    固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...
    
		
    5. 
						
  5. position的四种定位方式：static、fixed、relative、absolute
		
    position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  固定定位 是相对于浏览器窗口来进行定位: ...
    
		
    6. 
						
  6. html 四种定位含义
		
    技术过段时间不用的话就会忘记,需要复习一下 1.static:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明). 2.relative:生 ...
    
		
    7. 
						
  7. CSS 定位 四种定位
		
    absolute  生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位.元素的位置通过“left”,“top”,“right”以及“bottom”属性进行定位. fixed 生成固定 ...
    
		
    8. 
						
  8. CSS布局的四种定位方式
		
    1.static(静态定位): 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).参考上篇随笔. 2.relative(相对 ...
    
		
    9. 
						
  9. HTML四种定位-粘滞定位
		
    粘滞定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 02Prism WPF 入门实战 - 建项
			
    1.概要 Prism介绍 Github: https://github.com/PrismLibrary/Prism 开发文档:https://prismlibrary.com/docs/ Prism ...
    
			
    2. 
						
  2. 【c++ Prime 学习笔记】第18章 用于大型程序的工具
			
    大规模应用程序的特殊要求包括: 在独立开发的子系统之间协同处理错误:异常处理 使用各种库(可能包含独立开发的库)进行协同开发:命名空间 对比较复杂的应用概念建模:多重继承 18.1 异常处理 异常处理 ...
    
			
    3. 
						
  3. .net 5.0 ref文件夹的作用
			
    ref目录里的dll是一个名为参考组件的东西,微软MSDN给的解释是 参考组件是一种特殊类型的程序集,仅包含表示库的公共API面所需的最小元数据数量.它们包括用于在构建工具中引用程序集时重要的所有成员 ...
    
			
    4. 
						
  4. 深入浅出Java内存模型
			
    面试官:我记得上一次已经问过了为什么要有Java内存模型 面试官:我记得你的最终答案是:Java为了屏蔽硬件和操作系统访问内存的各种差异,提出了「Java内存模型」的规范,保证了Java程序在各种平台 ...
    
			
    5. 
						
  5. [no code][scrum meeting] Alpha 1
			
    项目 内容 会议时间 2020-04-06 会议主题 团队任务分析与拆解 会议时长 30min 参会人员 全体成员 $( "#cnblogs_post_body" ).catalo ...
    
			
    6. 
						
  6. oo第一次博客-三次表达式求导的总结与反思
			
    一.问题回顾与基本设计思路 三次作业依次是多项式表达式求导,多项式.三角函数混合求导,基于三角函数和多项式的嵌套表达式求导. 第一次作业想法很简单,根据指导书,我们可以发现表达式是由各个项与项之间的运 ...
    
			
    7. 
						
  7. netty传输java bean对象
			
    在上一篇博客(netty入门实现简单的echo程序)中,我们知道了如何使用netty发送一个简单的消息,但是这远远是不够的.在这篇博客中,我们来使用netty发送一个java bean对象的消息,但是 ...
    
			
    8. 
						
  8. [WPF] 在 Windows 11 中处理 WindowChrome 的圆角
			
    1. Windows 11 的圆角 在直角统治了微软的 UI 设计多年以后,微软突然把直角骂了一顿,说还是圆角好看,于是 Windows 11 随处都可看到圆角设计.Windows 11 使用 3 个 ...
    
			
    9. 
						
  9. 第36篇-return字节码指令
			
    方法返回的字节码相关指令如下表所示. 0xac ireturn 从当前方法返回int 0xad lreturn 从当前方法返回long 0xae freturn 从当前方法返回float 0xaf d ...
    
			
    10. 
						
  10. linux 的 逻辑卷管理
			
    lvm 逻辑卷管理器 关于逻辑卷管理lvm的一些操作 新建磁盘 sdcfdisk /dev/sdc 创建分区,更改分区id 为8e,改变分区类型为 lvm linux 创建物理卷与pv相关 pvcre ...
    
			
    11.