HTML四种定位-绝对定位
绝对定位
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四种定位-绝对定位的更多相关文章
- CSS四种定位及应用
定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...
- css四种定位
概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...
- CSS的四种定位的参照物
一.static定位 HTML 元素的默认值,即没有定位,遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, right影响. <!DOCTYPE html&g ...
- HTML四种定位-固定定位
固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...
- position的四种定位方式：static、fixed、relative、absolute
position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed 固定定位 是相对于浏览器窗口来进行定位: ...
- html 四种定位含义
技术过段时间不用的话就会忘记,需要复习一下 1.static:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明). 2.relative:生 ...
- CSS 定位 四种定位
absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位.元素的位置通过“left”,“top”,“right”以及“bottom”属性进行定位. fixed 生成固定 ...
- CSS布局的四种定位方式
1.static(静态定位): 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).参考上篇随笔. 2.relative(相对 ...
- HTML四种定位-粘滞定位
粘滞定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...
随机推荐
- 基于BootStrap的轮播图
准备 先设计一个承载轮播图的区域:四周向外阴影.扁平圆角: 1 #myShuffArea{ 2 width: 50%; 3 height: 300px; 4 border: solid 1px gai ...
- 2020.5.17--牛客小白月赛25 F.疯狂的自我检索者
F.疯狂的自我检索者 链接:https://ac.nowcoder.com/acm/contest/5600/F来源:牛客网 牛妹作为偶像乐队的主唱,对自己的知名度很关心.她平时最爱做的事就是去搜索引 ...
- 实现前后端分离，最好的方案就是SPA(Single Page Application)
从通常意义来讲,说到必须,就是指最佳实践上,实现前后端分离,最好的方案就是SPA.所以才会有 前后端分离=SPA 的近似,忽视了其中的差别.但是,既然有疑问了,我们就来看一下,为什么SPA是实现前后端 ...
- 内网渗透DC-1靶场通关(CTF)
最新博客见我的个人博客地址 DC系列共9个靶场,本次来试玩一下DC-1,共有5个flag,下载地址. 下载下来后是 .ova 格式,建议使用vitualbox进行搭建,vmware可能存在兼容性问题. ...
- 爬虫逆向基础，理解 JavaScript 模块化编程 webpack
关注微信公众号:K哥爬虫,QQ交流群:808574309,持续分享爬虫进阶.JS/安卓逆向等技术干货! 简介 在分析一些站点的 JavaScript 代码时,比较简单的代码,函数通常都是一个一个的,例 ...
- 生产环境全链路压测平台 Takin
什么是Takin? Takin是基于Java的开源系统,可以在无业务代码侵入的情况下,嵌入到各个应用程序节点,实现生产环境的全链路性能测试,适用于复杂的微服务架构系统. Takin核心原理图 Taki ...
- MySQL：基础语法-3
MySQL:基础语法-3 记录一下 MySQL 基础的一些语法,便于查询,该部分内容主要是参考:bilibili 上 黑马程序员 的课程而做的笔记,由于时间有点久了,课程地址忘记了 上文MySQL:基 ...
- websocket入门案例(echo)
websocket是用来干什么的,具体的请自行百度. 本文实现一个简单的websocket的入门小例子,实现客户端发送一句换,服务器端返回.即一个简单的交互. 一.服务器端的实现 1.创建一个类实现S ...
- SpringCloud微服务实战——搭建企业级开发框架（八）：使用注解校验微服务消息参数
平时开发过程中,经常要用到参数校验,如果直接在代码逻辑里面写参数校验,代码有点冗余且用起来不是非常方便,显得代码逻辑复杂且重复代码太多,这里我们使用注解的方式进行参数校验,SpringBoot中常 ...
- Taylor公式原来可以这么简单
1.Taylor公式 解决:含有高阶导数的中值定理或定积分.极限运算等题目 条件:f(x)在x=x0领域内(n+1)阶可导 结论:f(x)=Pn(x)+Rn(x) 2.x和x0的取值 3.Taylor ...