相对定位(relative),绝对定位(absolute),固定定位(fixed)
一、绝对定位 position:absolute
绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(html)。
绝对定位本身与文档流无关,因此不占空间,元素会脱离文档流,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以 它们可以覆盖页面上其他的元素,并且可以通过z-index属性来控制这些层的对方顺序。
1、举个例子:
HTML代码:
现在只给第五个box设置absolute
说明:元素在没有定义宽度的情况下,宽度由元素里面的内容决定,效果和用float方法一样。
效果:
2、absolute定位原理剖析:
1.在父元素没有设置相对定位或绝对定位的情况下,元素相对于根元素定位(即html元素)(是父元素没有)。
现在给box5偏移值来验证:
效果:
2、父元素设置了相对定位或绝对定位,元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位。
现在给body元素一个绝对定位(body元素设置为了absolute,整个容器的宽度由最长div决定,宽度变小了):
此时的box5现在相对于body元素定位
效果:
对比可以看到,相对于body定位的box5距离文字box1要远一点。所以在没有父元素设置相对定位或绝对定位的情况下,设置了absolute的元素会相对于html根元素定位。
二、相对定位 position:relative
定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了relative的元素仍然处在文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。
relative:相对于原来位置移动,元素设置此属性之后仍然处在文档流中,不影响其他元素的布局。
给第二个box设置relative:
元素相对于原来位置偏移,宽高都没变,撑大了容器。
效果:
三、固定定位 position:fixed
固定定位,相对于视口做参照系,是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化。
代码示例:
1.我们先在页面中输出一个标准情况下的 div 元素,不添加定位;
代码:
效果:
2. 然后给 div 元素添加固定定位:设置 position:fixed; left:100px; top:100px;
代码:
效果:
相对定位(relative),绝对定位(absolute),固定定位(fixed)相关推荐
- [css] 说说你对相对定位、绝对定位、固定定位的理解
[css] 说说你对相对定位.绝对定位.固定定位的理解 position 属性指定了元素的定位类型.position 属性的五个值:static(默认值) relative(相对定位) fixed(固 ...
- html固定按钮相对位置,CSS基础之相对定位,绝对定位,固定定位,z-index
1.相对定位 1.1.相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整.也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位 a position:relative; → 必 ...
- WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. 2.不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘.3.相对定位用途 ...
- 网页定位(position属性、相对定位、绝对定位、固定定位、z-index、设置透明度)
position属性 static:默认值,没有定位 relative:相对定位,相对于自己原来的位置进行偏移 absolute:绝对定位,以它最近一个已经定位的祖先元素为基准进行偏移 fixed:固 ...
- 定位组成,相对定位,绝对定位,固定定位、定位的特殊性,脱标的盒子不会触发外边距塌陷,绝对定位(固定定位)会完全压住盒子,焦点图布局(html+css)
定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 定位:将盒子定在某一个位置.所以也是在摆放盒子,按照定位的方式移动盒子. 定位=定位模式+边偏移 定位模式 ...
- 定位(定位组成【定位模式(静态定位,相对定位,绝对定位,固定定位,粘性定位,定位总结),位偏移】,)
定位 定位组成 定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子 定位也是用来布局的,它有两部分组成: 定位 = 定位模式 + 边偏移 定位模式 用于指定一个元素在文档中的 ...
- css定位详解(相对定位、绝对定位和固定定位)
文章目录 一.什么是定位? 二.各个属性值的作用 1.相对定位 2.绝对定位 3.静态定位 4.固定定位 三.相对和绝对定位 1.相对定位 2.绝对定位 3.相对定位和绝对定位 (1)相对定位 (2) ...
- 前端——css相对定位,绝对定位,固定定位
文章目录 相对定位 position: relative; 特性 用途 绝对定位 position: absolute; 绝对定位参考点 单独盒子绝对定位参考点: 父辈元素设置了相对定位,则子元素绝对 ...
- CSS定位布局:静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
目录 1.定位布局 1.1.静态定位( Static positioning) 简单代码实现: - 1.2.什么是相对定位?( Relative positioning ) 简单代码实现: - 1 ...
- 一键学会三种定位布局,相对定位、绝对定位、固定定位!
定位布局 定位属性: position 作用: 指定元素的定位类型 取值:static 默认不定位相对定位绝对定位固定定位 相对定位 关键字 position:relative 特点:相对不脱离文档流 ...
最新文章
- 每日一皮:如何用一句话让领导和同事都尴尬至极?
- 数组nn从外围1递增_最完整的PyTorch数据科学家指南(1)
- 二维非稳态导热微分方程_室内湿度影响验证:非真空型稳态法导热仪的正确使用方式...
- 【费用流】BZOJ1061: [Noi2008]志愿者招募(这题超好)
- 20180209-shutil模块
- linux升级python
- java基础知识点(2)—— 环境变量的配置
- Juniper防火墙透明模式
- 仿射解密c语言程序实验报告,仿射加密解密 - 依姆哣特的个人空间 - OSCHINA - 中文开源技术交流社区...
- 135 、137、139端口等主要用途
- SVN 忽略不需要提交的文件
- python播放mp3文件 playsound_播放声音文件 函数playsound()
- 使用Scrapy框架爬取网页并保存到Mysql
- java.lang.NoClassDefFoundError:org.ksoap2.seri...
- 公司电脑加域之后用不了USB但是可以用鼠标键盘得解决方法
- 一山不容二虎?双动力同步驱动技术与模型分享
- mobilenet压缩
- Choco-slover的使用
- GRANT ALL PRIVILEGES
- PageHelper关联查询 统计总数问题