定位（如何运用定位）
定义：
定位：是一种高级的布局手段
作用：
通过position属性设置定位
可选值：
static 默认值，没有开启定位
开启定位：
relative 开启相对定位
absolute 开启绝对定位
fixed 开启固定定位
sticky 开启粘滞定位
relative 开启相对定位
特点
a:开启相对定位之后，如果不配合偏移量使用，元素是没有任何变化
b:相对定位的原点，就是元素原来在文档流中的位置
c:开启相对定位后，元素的层级提高了
d:开启相对定位，元素的性质不会发生改变，块还是块，行内还是行内，
也就是说元素没有脱离文档流
偏移量
偏移量：
left 相对定位位置左侧的偏移量
right 相对定位位置右侧的偏移量
top 相对定位位置上侧的偏移量
bottom 相对定位位置下侧的偏移量
一般情况下，水平方向的偏移量，垂直方向的偏移量，只用一个值确定，不会同时使用两个值，容易出问题
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box {width: 600px;height: 600px;border: 5px solid rgb(56, 56, 56);}.box1 {width: 200px;height: 200px;background-color: red;}.box2 {width: 200px;height: 200px;background-color: yellow;/* 开启相对定位 */position: relative;left: 400px;/* right: 50px; */top: 200px;/* bottom: 200px; *//* top: -100px; */}.box3 {width: 200px;height: 200px;background-color: green;}.s1 {width: 200px;height: 200px;background-color: yellow;position: relative;left: 100px;bottom: 50px;}</style></head><body><div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div><span class="s1">我是一个span</span></div></body>
</html>
position: absolute; 开启绝对定位
特点
开启之后特点：
a:开启绝对定位后，元素就会脱离文档流
b:开启绝对定位后，元素的性质就发生了改变，不再区分块，行内块，行内元素
c:开启绝对定位，元素的层级也会提高
d:绝对定位，如果要元素的位置发生改变，依然需要配合偏移量去使用
e:绝对定位的原点：相对于其包含块来定位的
一般情况下，我们给子元素设置绝对定位，同时也会给父元素设置相对定位，
叫“子绝父相”，但具体情况具体看
包含块：
（1）、在没有定位的情况下，包含块就是离当前元素最近的祖先元素
（2）、有定位的情况，包含块是离它最近的，开启了定位的祖先元素；
如果他的祖先元素都没有开启定位，包含块就是根元素（html），又叫初始包含块
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">*{padding: 0;margin: 0;}.outer {width: 600px;height: 600px;border: 5px solid black;margin: 50px;position: relative;}.box1 {width: 200px;height: 200px;background-color: orange;position: absolute;right: 0;bottom: 0;}.box2 {width: 300px;height: 300px;background-color: red;}</style></head><body><div class="outer"><div class="box1"></div><div class="box2"></div></div></body>
</html>
position: fixed; 开启固定定位
特点
开启固定定位特点
a：元素会脱离文档流，元素的性质也会发生改变
b:元素会固定在页面当中，不会随着滚动条的滚动而滚动
c:元素的层级也会提高
d:元素位置的改变，也需要配合偏移量去使用
e：固定定位是参考根标签（浏览器视口）来偏移
一般情况下：固定定位常用于，广告、固定导航等
position: sticky; 开启粘滞定位
特点：
a:不会脱离文档流，元素的性质也不会发生改变
b:粘滞定位要配合top值去使用，在没有到达top值之前，元素是随着滚动条滚动而滚动
到达指定的top值后，元素就不会随着滚动条滚动而滚动
c：粘滞定位的偏移量定位点：是浏览器的视口
一般使用场景：广告，导航
绝对元素定位布局
水平布局
left+margin-left+border-left+padding-left+width+
padding-right+border-right+margin-right+right
-当开启绝对定位后，水平方向的布局等式就会加上left，right两个值
此时规则和之前一样，只是多添加了两个值
-当发生过度约束时
1:如果9个值中没有auto，则自动调整right值以使等式满足
0+0+0+0+100+0+0+0+300=400
2:如果有auto，则自动调整auto的值以使等式满足
-可设置auto的值
margin width left right
四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,
若width left right都为0，margin会均分四个方向值
—两个auto的情况
margin 和width为auto， 调整的width
margin 和left，right其中一个值为auto， 调整left/right
width 和left，right其中一个值，调整left/right
left，right都为auto,调整right
—三个auto的情况
margin width left ===> 调整left
margin width right ===> 调整right
width left right ===> 调整right
—四个值auto的情况===> 调整right
总结：
(1)、right>left>width>marign
（2）、在绝对定位的情况下，四个方向偏移量都为0px，宽度也为固定值，让margin为auto，
元素会水平垂直居中
定位（如何运用定位）相关推荐
- Android定位开发之百度定位、高德定位、腾讯定位，三足鼎立一起为我所用！
这几天的项目不是非常紧.于是想为未来可能要做的项目做一些技术储备. 下一个项目非常有可能是定位开发,须要用到手机定位功能,于是查了查如今比較流行的第三方定位,最火的基本上就是百度定位>高德定位& ...
- 【数字信号处理】相关函数应用 ( TDOA 时差估计 | 时间差与距离差 | 方向定位与精准定位 | 信号描述 | 通过相关函数求时间差 )
文章目录 一.TDOA 时差估计 1.信号相关函数 2.时间差与距离差 3.方向定位与精准定位 4.2 个信号的函数描述 5.通过相关函数求时间差 一.TDOA 时差估计 假设有一个 " 信 ...
- 【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )
文章目录 一. ConstraintLayout 简介 1. 引入 约束 布局 ( 1 ) 约束性布局 作用 和 简介 2. 约束 简介 ( 1 ) 约束个数要求 ( 2 ) 约束设置 与 显示位置 ...
- html之CSS设计（float定位和position定位详细分析）
文章目录 一.float浮动 二.position定位 今天来谈谈网页设计中的float定位和position定位,这两个在网页排版中是必不可少的操作,当然float其实用得更多. 一.float浮动 ...
- 获取当前ip_百度定位:IP定位、浏览器定位、SDK辅助定位
效果: IP定位(精准) 浏览器定位和SDK辅助定位返回经纬度不精准 要点: 入口文件引入(需要申请百度ak) <script type="text/javascript" ...
- 苏州新导_室内定位技术实现停车场下的高精度定位_室内定位技术带你找朋友
现在社会科技智能化的开展给咱们的日子带来了许多便当,让咱们更加快速的接触到从前的"未来日子".跟着科技技能的越来越成熟,人工智能也开端向咱们展现其强壮的核算才能!而跟着科技技能开展 ...
- uwb定位与蓝牙定位成本对比分析
作为两种不同的技术,直接对比成本分析本质上不是非常的科学.因为目标客户群不同,精度也不一样,所以只能做些定性的对比分析. 在室内定位的情况下,假设一个50米50米的区域内,进行网络建设,UWB所需的基 ...
- 室内定位方案部署WIFI定位还是IBeacon定位-新导智能
iBeacon,在国内其完成已能够很好的完成室内定位方案计划的进程,并且在露天煤矿.化工厂.商场等场景下均有小范围的试用.到购物中心的地下停车场,购完物后,是不是有找不着停车位的时分?那么问题来了,怎 ...
- android 后台实时定位,实现后台定位，持续无限制定位
更新记录 1.0.2(2021-04-27) 新增:定位模式传入可高精度定位模式,低功耗定位模式,以及实现gps离线定位(不需要连接网络) 1.0.1(2021-03-17) 1.停止定位增加回调信息 ...
- 基于BLE + LoRa人员定位技术下的室内定位-Lora人员定位-新导智能
现在,全球两大主流物联网网络NB-IoT与LoRa在我国迅猛开展,有关部分计算一千多款物联网运用产品已落地我国各省.据悉,70%的企业积极寻求成熟.牢靠且快速落地的物联网产品,最近发展迅速的Lora人 ...
最新文章
- 硬改TP-Link WR841N v8刷breed和OpenWrt
- linux清理内存命令
- 图解观察托管程序线程
- 《漫画算法》源码整理-1 时间复杂度 空间复杂度
- Python教程：Python如何实现穷举搜索？
- 两个数相乘积一定比每个因数都大_小升初数学知识点大全含公式+20类必考应用题（含答案解析），孩子考试一定用得上！...
- Linux对象文件是个啥东东
- bootstrap 轮播控制时间_【前端冷知识】如何封装一个图片轮播组件
- 7-4 mmh学长与出栈 (20分)
- 【产品人卫朋】华为IPD流程体系：集成产品开发框架
- 删除脚注分割线（word左下角的横线）
- 22种免费网络推广方式有哪些？
- 字节跳动做教育能否摆脱互联网公司“流量魔咒”？
- 【2016.5.27】再见，软件工程，你好，软件工程。
- 分布式事务 seata 最全入门教程
- 工作笔记：如何用Django连接Kerberized甲骨文(Oracle)数据库
- 前端自动生成Change Log的实现
- 非全也要卷？复旦大学软件非全很多高分
- 阿里java规范手册总结
- 软件测试之自动化测试Pytest教程