相对定位
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. 四种常见的App弹窗设计,你有仔细注意观察吗?

    弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...

  3. (转)四种常见的 POST 提交数据方式

    四种常见的 POST 提交数据方式(转自:https://imququ.com/post/four-ways-to-post-data-in-http.html) HTTP/1.1 协议规定的 HTT ...

  4. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  5. 一文读懂四种常见的XML解析技术

    之前的文章我们讲解了<XML系列教程之Schema技术_上海尚学堂java培训技术干货><XML的概念.特点与作用.XML申明_上海Java培训技术干货>,大家可以点击回顾一下 ...

  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. application/json 四种常见的 POST 提交数据方式

    四种常见的 POST 提交数据方式   HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 ...

  8. 转:application/json 四种常见的 POST 提交数据方式

    四种常见的 POST 提交数据方式 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 PO ...

  9. POST提交数据时四种常见的数据格式

    最近项目部署到新环境tomcat+mysql,想看看项目部署成功没有,就用soupui调对应接口开测试,soupui使用比较简单,给上接口地址,入参xml报文,把入参的media Type设置为app ...

随机推荐

  1. RPAaaS是什么?为何能够推进RPA人人可用?

    RPAaaS是什么?为何能够推进RPA人人可用? 助力中小企业快速实现自动化,RPAaaS加速"RPA人人可用"时代到来 相对传统RPA拥有更多优势,PRAaaS为RPA行业带来更 ...

  2. .Net Core微信服务商二次进件

    最近商城进行微信服务商二次进件的开发,大致有几个点 一,服务商签名 二,服务商证书获取 三,图片上传 四,敏感信息加密 五,查询进件状态 除此之外,就是进件信息的拼装 电商二级商户进件申请单-状态流转 ...

  3. props&attrs provide inject

    defineComponent({ props: {// 1 } setup (props, {attrs, emit}) { } }) 一,组件传值: 父传子: 1.如果没有在定义的props中声明 ...

  4. Beta-功能规格说明书

    项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 团队项目-计划-功能规格说明书 一.引言 1. 项目简介 项目团队:删库跑路对不队 项目名称:题士 项目内容 ...

  5. [软软软]技术博客-Commitizen优化git commit

    工具介绍 commitizen/cz-cli是一个规范git commit的工具,使用它代替git commit能够方便有效地写好提交的log,使得团队项目的版本信息更清晰. 安装 (全局安装) np ...

  6. Noip模拟72 2021.10.9

    T1 出了个大阴间题 真就以为他出了个大阴间题就没写,打个暴力就跑了 数据范围显然摆明是状压 设$f[sta][0/1]$表示在已经选择的集合$sta$中,$A$的最大值是$A$还是$A+1$ 然后按 ...

  7. CSP2021 翻车记

    DAY - INF 日常模拟赛被吊打,不知道为啥总是出一些小问题导致正解gg,成绩的话也就是中游吧,不过方差不小 DAY - 2 感冒了,头疼得很,签到题甚至也签到失败了,烦得很 DAY -1 全真体 ...

  8. MyBatis源码分析(八):设计模式

    Mybatis中用到的设计模式 1. 建造者(Builder)模式: 表示一个类的构建与类的表示分离,使得同样的构建过程可以创建不同的表示.建造者模式是一步一步创建一个复杂的对象,他只允许用户只通过指 ...

  9. 转载:10G以太网光口与Aurora接口回环实验

    10G以太网光口与高速串行接口的使用越来越普遍,本文拟通过一个简单的回环实验,来说明在常见的接口调试中需要注意的事项.各种Xilinx FPGA接口学习的秘诀:Example Design.欢迎探讨. ...

  10. Python matplotlib pylab 画张图

    from pylab import * w1 = 1 w2 = 25 fs = 18 y = np.arange(-2,2,0.001) x = w1*y*log(y)-1.0/w2*exp(-(w2 ...