定位(定位组成【定位模式(静态定位,相对定位,绝对定位,固定定位,粘性定位,定位总结),位偏移】,)
定位
定位组成
定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子
定位也是用来布局的,它有两部分组成:
定位 = 定位模式 + 边偏移
定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
定位模式
选择器 { position: 属性值;
}
定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。
定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:
静态定位(static)
静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none,静态定位static,不要定位的时候用
静态定位 按照标准流特性摆放位置,它没有边偏移。
静态定位在布局时我们几乎不用的
相对定位(relative)
相对定位是元素在移动位置的时候,是相对于它自己原来的位置来说的(自恋型)。
相对定位的特点:
它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。
因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的
绝对定位(absolute)
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)
绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。(脱标)
父元素没有定位:则以浏览器为准定位(Document 文档)
父元素有定位(不为静态定位):则以最近一级的有定位祖先元素为参考点移动位置
固定定位(fixed)
固定定位是元素固定于浏览器可视区的位置。(认死理型) 主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。
固定定位的特点:
固定定位也可以看做是一种特殊的绝对定位。(认死理型)
固定定位不在占有原先的位置。
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性
来设置元素的位置;
跟父元素没有任何关系
不随滚动条滚动。
粘性定位(sticky)
粘性定位可以被认为是相对定位和固定定位的混合
选择器 { position: sticky; top: 10px; }
粘性定位的特点:
以浏览器的可视窗口为参照点移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必须添加 top 、left、right、bottom 其中一个才有效
跟页面滚动搭配使用。 兼容性较差,IE 不支持。
定位总结
边偏移需要和定位模式联合使用,单独使用无效;
top
和 bottom
不要同时使用;
left
和 right
不要同时使用。
位偏移
边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。
定位的盒子有了边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。
定位(定位组成【定位模式(静态定位,相对定位,绝对定位,固定定位,粘性定位,定位总结),位偏移】,)相关推荐
- 相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法
相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法 一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
- 相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景 相对定位 <!DOCTYPE html> <html lang="e ...
- 【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成 定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
- HTML+CSS---定位(相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度(opacity属性定义元素的不透明度--IE的半透明滤镜)---外边线
文章目录 定位 静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序 表单 设置光标样式 透明度 opacity属性定义元素 ...
- CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位
CSS定位 定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子. 定位的组成 定位是将盒子定位在某一位置.按照定位的方式移动盒子. 定位=定位模式+边偏移. ...
- 绝对定位、相对定位、固定定位特点
一.定位 1.定位的定义 某个元素可以自由地在盒子上面移动,并且可以压着其他元素 当滚动窗口时,某个元素可以固定在页面上 可以让盒子自由的在某个盒子上进行移动并且可以压住其他盒子,或者可以在屏幕上固定 ...
- 层模型--绝对定位、相对定位、固定定位
绝对定位: 如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性 ...
- CSS中定位(带你实操代码掌握固定定位、绝对定位与相对定位(子绝父相))
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 固定定位 绝 ...
- css盒子绝对定位,相对定位,固定定位
相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用rela ...
最新文章
- 我把SpringBoot的banner换成了美女,老板:工作不饱和,建议加班
- Leetcode 101.对称二叉树 (每日一题 20210709)
- Tensorflow[基础篇]——LSTM的理解与实现
- 卧槽!迅雷的代码竟然被扒了精光!
- 分享:20 本优秀的 Python 电子书
- Thor 1.3.4免费安装
- 使用WePE对无法启动的系统文件进行操作
- netty 原理分析
- 【python 走进NLP】hanNLP 简繁拼音转换
- Flutter 城市/通讯录列表字母索引联动效果实现
- python阿拉伯数字转换为英文,python – 将东部阿拉伯数字转换为西方阿拉伯数字...
- 2021昆明icpc B 状压+期望dp,一点几何模拟
- idea的英文是什么意思_intellij是什么意思
- office 2007 word空格消失的问题
- 谭民机器人_机器人技术研究进展_谭民
- 岳飞诗词集萃[zz]
- RemoteView流程
- mysql报错In aggregated query without GROUP BY
- android蓝牙源码分析
- Resharper上手指南