relative和absolute的使用(详细+案例)

相对定位relative：相对于自己原先的位置而调整位置+会占用原先位置

eg:
原先位置（在没有加top,left,right,bottom调整位置）

根据原先位置加top而调整定位

绝对定位absolute：单独使用absolute不会占用原先位置+absolute(子)+relative(父)是固定搭配，如果父元素或祖先元素没有设置相对定位relative，则根据浏览器而定位

eg:
absolute(子)+relative(父)的搭配使用 (有absolute一定要有relative)

如果父元素没加relative,则absolute会寻找离他最近有加relative的祖先元素

完

relative和absolute的使用(详细+案例)相关推荐

position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？
常见的position定位方式如下: static 默认值.元素出现在正常的普通流中 relative 生成相对定位的元素,相对于其在普通流中的位置进行偏移. fixed (老IE不支持)生成绝对定位 ...
CSSposition定位（relative、absolute、fixed、sticky）
这一周,我在逆战班学习了很多,具体介绍一下position相对定位和绝对定位,希望可以帮助到你. **position定位 ** position 的五个属性:static(默认).relative. ...
relative和absolute的区别
这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层 ...
[css] position的relative和absolute定位原点是哪里？
[css] position的relative和absolute定位原点是哪里? absolute: 定位原点为第一个position不为static的父级元素的左上角. 可以基于该特性实现heigh ...
relative和absolute使用
relative和absolute使用开发工具与关键技术:DW 作者:黄金燕年级: 1805 撰写时间: 2019年2月16日 relative相对定位,absolute绝对定位某个元素,disp ...
HTML入门学习笔记+详细案例
✨HTML入门学习笔记+详细案例作者介绍:
CSS中position的relative和absolute.
2021 first note CSS中position的relative和absolute. 之前接触过, 听老师讲的时候, 赶脚自己挺明白的, 后来就放下了, 最近又开始复习, 发现有些熟悉但更多 ...
全网最实用的 IDEA Debug 调试技巧（超详细案例）
目录前言正文 Debug 的常见使用场景基础操作行断点(Line Breakpoints) 方法断点(Method Breakpoint) 字段断点(Field Watchpoints) 异常 ...
如何保障缓存和数据库的一致性（超详细案例）【转载自程序员囧辉】
如何保障缓存和数据库的一致性(超详细案例)[转载自程序员囧辉] 一.前言二.正文方案1:同步删除 1.1 核心流程 1.2 存在的问题方案2:延迟双删 2.1 核心流程 2.2 存在的问题方 ...

relative和absolute的使用(详细+案例)

relative和absolute的使用(详细+案例)相关推荐

最新文章

热门文章