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 /* 定位(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四种常见的定位-相对定位的更多相关文章
- 四种常见的APP分类界面布局设计案例学习
相信各位对于APP设计,已经很熟练啦.如何在熟练的基础上提高我们界面的优美度,或者是进行APP界面的迭代设计. 重构APP设计布局是我们必须要经历的一个过程. 在之前,学习UI设计的时候,经常要接触到 ...
- 四种常见的App弹窗设计,你有仔细注意观察吗?
弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...
- (转)四种常见的 POST 提交数据方式
四种常见的 POST 提交数据方式(转自:https://imququ.com/post/four-ways-to-post-data-in-http.html) HTTP/1.1 协议规定的 HTT ...
- 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- 一文读懂四种常见的XML解析技术
之前的文章我们讲解了<XML系列教程之Schema技术_上海尚学堂java培训技术干货><XML的概念.特点与作用.XML申明_上海Java培训技术干货>,大家可以点击回顾一下 ...
- 四种常见的 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) 转 ...
- application/json 四种常见的 POST 提交数据方式
四种常见的 POST 提交数据方式 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 ...
- 转：application/json 四种常见的 POST 提交数据方式
四种常见的 POST 提交数据方式 HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 PO ...
- POST提交数据时四种常见的数据格式
最近项目部署到新环境tomcat+mysql,想看看项目部署成功没有,就用soupui调对应接口开测试,soupui使用比较简单,给上接口地址,入参xml报文,把入参的media Type设置为app ...
随机推荐
- GAN实战笔记——第二章自编码器生成模型入门
自编码器生成模型入门 之所以讲解本章内容,原因有三. 生成模型对大多数人来说是一个全新的领域.大多数人一开始接触到的往往都是机器学习中的分类任务--也许因为它们更为直观:而生成模型试图生成看起来很逼真 ...
- Just My Code debugging
Just My Code debugging During a debugging session, the Modules window shows which code modules the d ...
- 来说说JPA、Hibernate、Spring Data JPA之间的什么关系？
目录 JPA Hibernate Spring Data JPA 实践 来说说JPA.Hibernate.Spring Data JPA之间的什么关系 Java 持久层框架访问数据库的方式大致分为两种 ...
- 编程题：X星人的金币
X星人的金币 时问限制:3000MS 内存限制:589824KB 题目描述: X是人在一艘海底沉船上发现了很多很多很多金币.可爱的X星人决定用这些金币来玩一个填格子的游戏.其规则如下:第1个格子放2枚 ...
- [no code][scrum meeting] Beta 8
$( "#cnblogs_post_body" ).catalog() 例会时间:5月22日15:30,主持者:赵涛 下次例会时间:5月23日11:30,主持者:肖思炀 一.工作汇 ...
- python re:正向肯定预查(?=)和反向肯定预查(?<=)
参考资料:https://tool.oschina.net/uploads/apidocs/jquery/regexp.html (?=pattern) 正向肯定预查,在任何匹配pattern的字符串 ...
- [转]DDR3基础知识介绍
本文转自:(4条消息) xilinx ddr3 MIG ip核使用详解_admiraion123的博客-CSDN博客 1,DDR3基本内容介绍1.1,DDR3简介DDR3全称double-data-r ...
- Linux上的多进程间通信机制
最近项目需要一个类似于Android上广播通信机制,方便多进程间相互通信,可以是一对多,多对一,或者多对多. 大致如下 Linux现有的进程间通信能用的只有 管道 消息队列 信号量(这个还只能算同步机 ...
- hdu 1709 The Balance（母函数）
题意: 有一个天平.有N个砝码.重量分别是A1...AN. 问重量[1..S]中有多少种重量是无法利用这个天平和这些砝码称出来的. S是N个砝码的重量总和. 思路: 对于每一个砝码来说,有三种:不放, ...
- Flink入门-第一篇：Flink基础概念以及竞品对比
Flink入门-第一篇:Flink基础概念以及竞品对比 Flink介绍 截止2021年10月Flink最新的稳定版本已经发展到1.14.0 Flink起源于一个名为Stratosphere的研究项目主 ...