绝对定位

 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. Java（21）内部类
			
    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15228411.html 博客主页:https://www.cnblogs.com/testero  ...
    
			
    2. 
						
  2. Java（30）集合五Set
			
    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15228440.html 博客主页:https://www.cnblogs.com/testero  ...
    
			
    3. 
						
  3. 【机器学习基础】逻辑回归——LogisticRegression
			
    LR算法作为一种比较经典的分类算法,在实际应用和面试中经常受到青睐,虽然在理论方面不是特别复杂,但LR所牵涉的知识点还是比较多的,同时与概率生成模型.神经网络都有着一定的联系,本节就针对这一算法及其所 ...
    
			
    4. 
						
  4. Java：锁笔记
			
    Java:锁笔记 本笔记是根据bilibili上 尚硅谷 的课程 Java大厂面试题第二季 而做的笔记 1. Java 锁之公平锁和非公平锁 公平锁 是指多个线程按照申请锁的顺序来获取锁,类似于排队买 ...
    
			
    5. 
						
  5. RBAC 权限管理模型
			
    一.RBAC模型--基于角色的访问控制 什么是RBAC RBAC(Role-Based Access Control)基于角色的访问控制.这是从传统的权限模型的基础之上,改进而来并且相当成熟的权限模型 ...
    
			
    6. 
						
  6. UltraSoft - Beta - Scrum Meeting 11
			
    Date: May 27th, 2020. Scrum 情况汇报 进度情况 组员 负责 今日进度 q2l PM.后端 记录会议 Liuzh 前端 增加了对重复日程的支持 Kkkk 前端 测试验证前后端 ...
    
			
    7. 
						
  7. 软件案例分析——VS和VS Code
			
    软件案例分析--VS和VS Code 项目 内容 这个作业属于哪个课程/ 2020年春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里? 软件案例分析 我在这个课程的目标是? 提高代码水平,熟 ...
    
			
    8. 
						
  8. Spring Security 多过滤链的使用
			
    Spring Security 多过滤链的使用 一.背景 二.需求 1.给客户端使用的api 2.给网站使用的api 三.实现方案 方案一: 方案二 四.实现 1.app 端 Spring Secur ...
    
			
    9. 
						
  9. IRCUT作用
			
    IRCUT组成原理 IRCUT由两层滤光片组成,一片红外截止或吸收滤光片和一片全透光谱滤光片 白天是红外截止滤光片工作,晚上是全透滤光片工作,白天摄像头可以接收到人眼无法识别的红外线,会导致图像与肉眼 ...
    
			
    10. 
						
  10. [CSP-S2021] 回文
			
    链接: P7915 题意: 给出一个长度为 \(2n\) 的序列 \(a\),其中 \(1\sim n\) 每个数出现了 2 次.有 L,R 两种操作分别是将 \(a\) 的开头或末尾元素加入到初始为 ...
    
			
    11.