css/html 定位 绝对定位/相对定位
布局：文档流，margin，浮动，定位····
定位：一种高级的布局的方式。你可以将任何的元素，放在页面任意的位置
学习定位：如何开启，开启后特点
position样式名，
可选值：
static 默认值，没有开启定位
开启定位的情况
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位
开启相对定位后，元素的特点
1、开启相对定位，如果没有设置偏移量，元素的位置是不发生变化
2、相对定位的原点是元素原本在文档流中位置
3、开启相对定位后，元素的等级会提高
4、开启相对定位， 元素不会脱离文档流，
元素的性质不会改变，也就是块元素还是块元素，行内元素还是行内元素
偏移量 可正可负
left 元素相对于定位位置左侧距离
top 元素相对于定位位置上侧距离
right 元素相对于定位位置右侧距离
bottom 元素相对于定位位置下侧距离
通常偏移量只需要使用两个就可以对一个元素进行定位，
一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
开启绝对定位
position: absolute;
绝对定位开启后的特点
1、开启绝对定位后的元素会脱离文档流
2、开启绝对定位后，元素的性质会发生变化
块元素不会独占一行了，行内元素也可以设置宽高了等
3、开启绝对定位后，如果希望元素的位置发生变化，依然需要设置偏移量
4、绝对定位相对于其包含块来发生偏移
一般情况，如果给元素开启一个绝对定位，同时也会给其父元素开一个相对定位
我们管这种情况叫“父相子绝”
5、绝对定位也会提高元素的等级
包含块：
1、没有定位的时候，包含块就是其父元素
2、如果有定位的时候，包含块就是离元素最近的开启了定位的祖先元素，
如果没有其祖先元素都没有开启定位，其包含块就是html根标签，
所以我们管html也叫初始包含块
position: fixed;开启固定定位
特点：
1、开启固定定位后，元素会脱离文档流
2、开启固定定位，会改变元素的性质
3、固定定位一直是参照html根标签来发生偏移
4、开启固定定位后，元素不会根据滚动条滚动而滚动
补充：固定定位的应用场景
一般顶部导航，侧边导航，广告，
position:sticky; 开启了粘滞定位
特点：
1、开启粘滞定位，元素不会脱离文档流，元素的性质也不会发生变化
2、开启粘滞定位，一般配合top值使用，在没有到达top值的时候，
元素是随着滚动条滚动而滚动的，当到达top值的时候，就不会随着滚动条滚动而滚动了
3、粘滞定位也是参照html来偏移
应用场景：
导航，侧边导航····
一般注意浏览器兼容问题
css/html 定位 绝对定位/相对定位相关推荐
- 【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成 定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
- [css] 说说你对相对定位、绝对定位、固定定位的理解
[css] 说说你对相对定位.绝对定位.固定定位的理解 position 属性指定了元素的定位类型.position 属性的五个值:static(默认值) relative(相对定位) fixed(固 ...
- CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 固定定位 绝 ...
- CSS相对定位,固定定位,绝对定位实例方法和实例
1CSS相对定位方法实例: 当容器的position属性值为relative时,这个容器即被相对定位了.相对定位和其他定位相似,也是独立出来浮在上面.不过相对定位的容器的top(顶部).bottom( ...
- CSS中固定定位、相对定位、绝对定位以及flex布局高效定位
CSS中固定定位.相对定位.绝对定位以及flex布局高效定位 一.固定布局 将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...
- css定位（相对定位和绝对定位）
文章目录 前言 一.定位是什么? 二.如何开启定位 1.相对定位 2.绝对定位 总结 前言 随着前端课程的学习,我们从浮动来到了定位,同样都是布局所需要用到的方法,那么有什么区别呢?设置定位又有什么要 ...
- CSS元素的定位（相对定位、绝对定位、固定定位、粘滞定位）
目录 元素的定位 相对定位 绝对定位 固定定位 粘滞定位 绝对定位的布局 元素的定位 相对定位 当元素的position属性值设置为relative时则开启了元素的相对定位. 相对定位的特点: 1.元 ...
- CSS 元素的定位之相对定位 position: relative
在CSS中,通过 position属性来对元素进行定位,可选的定位类型有 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原 ...
- 定位：相对定位和绝对定位
HTML <div id="father"><div id="first">第一个盒子</div><div id=&q ...
最新文章
- OPENFIRE支持EMOJI
- IOS-开发中手势的处理
- 查看安装的cuda和cudnn的版本号
- 克隆人不只出现在科幻电影里？阿里虚拟美女“俪知”亮相
- @value 静态变量_C语言基本知识：变量
- 安装vs2013以后,链接数据库总是报内存损坏,无法写入的错误
- python标准库——datetime模块
- app 怎么实现后端对前端的通知功能_app测试流程
- qq 音乐 python 登录_手把手教你使用Python抓取QQ音乐数据（第四弹）
- IDEA 删除SVN文件
- 在页面引入项目路径 ${webRoot}
- 2021最新MyEclipse安装教程
- 【树形dp】贪吃的九头龙
- 操作系统的主要功能（3）
- 5分钟学废携程出品配置中心阿波罗的原理与搭建
- 拉伸——CAD做三维图的常用指令
- python栈是什么意思_Python实现的栈（Stack）
- 2K薪酬收微博评论自动点赞码源 有能力的大佬加Q 9596702
- C语言----文件存储
- 国内免费（开源）CMS系统【大全】