CSS相对定位和绝对定位的区别

CSS中相对定位和绝对定位常常会使初入的新人感到困惑，我本人也是深受其害！今天详细的给大家说一下相对定位和绝对定位的区别，也是对自己的一种复习。
一、相对定位 position: relative;
根据w3cschool里的介绍，相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}

也就是说，当开启相对定位时，元素的移动是以自身为基准进行平移，同时自己本身的空间会进行保留，不会被其他元素给占据。而且还会激活z-index属性，其层叠级别高于原本的文档流时将会进行覆盖。
二、绝对定位 position: absolute;
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}

与相对定位不同的是，绝对定位是相对于自己的父辈元素进行平移，若自己的父辈没有开启相对定位，则元素相对于body转移位置。若自己的父辈全部开启定位，则会对离自己最近的父辈元素进行平移，但是若只开启定位没有进行平移，则会在原来位置脱离文档流。还有一个不同的点是，绝对定位自身的空间会被其他元素占有，同时也会激活z-index属性，其层叠级别高于原本的文档流时将会进行覆盖。

CSS相对定位和绝对定位的区别相关推荐

Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
CSS相对定位和绝对定位详解
CSS相对定位和绝对定位详解如果,说浮动, 关键在一个 "浮" 字上面, 那么我们的定位,关键在于一个 "位" 上. PS: 定位是我们CSS算是数一数二难 ...
html相对定位不占位置,相对定位与绝对定位的区别相对定位是以当前位置为基准计算的...
div的相对定位和绝对定位是什么意思,什么区别啊? 有位老兄说学习div+css的div布局必须学会相对定位和绝对定位小弟初学不相对定位和绝对定位是定位的两种表现形式,区别如下: 一.主体不同相对 ...
关于相对定位和绝对定位的区别
在我们进行编程的过程中时常会用到position:relative和position:absolute,分别是相对位置和绝对位置.许多的人不清楚其中的区别.让我们了解一下. relative: 1.r ...
html如何用百分比绝对定位,CSS相对定位和绝对定位使用百分比的计算逻辑
需求页面需要实现自适应布局,因此使用百分比计算测试页面主要使用相对定位和绝对定位,主要从这2方面进行比对测试相对定位 html, body { margin: 0; padding: 0; } ...
CSS相对定位和绝对定位使用百分比的计算逻辑
需求页面需要实现自适应布局,因此使用百分比计算测试页面主要使用相对定位和绝对定位,主要从这2方面进行比对测试相对定位 <style>html, body {margin: 0;pa ...
前端——css相对定位，绝对定位，固定定位
文章目录相对定位 position: relative; 特性用途绝对定位 position: absolute; 绝对定位参考点单独盒子绝对定位参考点: 父辈元素设置了相对定位,则子元素绝对 ...
详解div+css相对定位和绝对定位用法
1.定位的专业解释: (1)语法 position:static|absolute|fixed|relative 从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(ab ...
关于相对定位与绝对定位的区别
之前一直搞不明白html中positon:relative; 和 position:absolute;这两个属性.这里记录一下. 理论解释: 相对定位:该元素相对于自己原有位置,偏移一定距离.相对的是 ...

CSS相对定位和绝对定位的区别

CSS相对定位和绝对定位的区别相关推荐

最新文章

热门文章