相对定位(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 特点:相对不脱离文档流 ...

相对定位(relative)，绝对定位(absolute)，固定定位(fixed)

相对定位(relative)，绝对定位(absolute)，固定定位(fixed)相关推荐

最新文章

热门文章