position 使用 relative, absolute, fixed 的区别

原创 2018年04月16日 09:33:07

relative:生成相对定位的元素,相对于其正常位置进行定位。

元素的位置通过left、right、top、button属性进行规定,

可以通过z-index进行层次分级。

元素元素仍保持其未定位前的形状,原本所占的空间仍将保留。

如果没有定位偏移量,对元素本身没有任何影响

absolute:生成绝对定位元素。使元素脱离文档流,并相对于其包含块进行定位,包含块可能是文档中的另一个元素或者是初始包含块,

元素原先在正常文档流中所占的空间会会被后面元素占据;

元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框;

绝对定位元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。只要父级元素设置了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的)。如果都没有定义,那么就相对于整个文档body定位(注意不是相对于浏览器窗口定位)

相对定位一般都是配合绝对定位元素使用

fixed:生成绝对定位元素,相对于浏览器窗口的定位。通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed

微信公众号使用

微信公众号使用,是一套基础课程,为后面的《PHP微信公众号开发》做铺垫。微信几乎是智能手机上必装的软件,很多的商家在微信上开通公众号,想要把公众号的价值发挥最大,必须学会公众号的使用,开发和营销。这一套课程重点教你学会公众号的使用,为后面的做好基础。欢迎反馈,QQ/微信:68183131
  • 2016年06月24日 14:48

HTML之position:absolute relative static fixed的区别和理解

HTML之position:absolute relative static fixed的区别 在理解position:absolute relative static fixed的区别时,我们先需...
  • guyuealian
  • guyuealian
  • 2016-02-24 18:58:53
  • 4179

简单说一下CSS的position常用的三个属性:relative,absolute以及fixed,以及嵌套使用的一个常见情况

首先要清楚,position需要top,bottom,left,right来配合实现定位,当然根据实际情况,不必要把四个方向的定位全写出来。 举个例子。 position:absolute; top:...
  • DongGeGe214
  • DongGeGe214
  • 2015-06-01 16:40:59
  • 3385

Html position(static、relative、absolute、fixed)

讲解不错,转载备忘。 position的四个属性值: 1.relative 2.absolute 3.fixed 4.static 下面分别讲述这四个属性。      sub1      sub...
  • topviewers
  • topviewers
  • 2014-03-20 20:19:18
  • 10738

Css fixed和absolute定位区别

fixed:固定定位 absolute:绝对定位 区别很简单: 1、没有滚动条的情况下没有差异 2、在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 ...
  • taoerchun
  • taoerchun
  • 2015-08-20 18:19:11
  • 9428

css中overflow和position的搭配

背景 大数据控制平台查询结果的表格的表头需要做过滤功能,我的想法是在每一列的表头上加个过滤小图标,当点击它时弹出个相对右对齐的小框,框里有个输入框,一个过滤按钮,一个清空按钮。类似下图: ...
  • cangkukuaimanle
  • cangkukuaimanle
  • 2015-11-12 16:40:40
  • 2681

对CSS中的relative,absolute,fixed的探讨

一、relative对absolute的限制作用 1.限制left/top/right/bottom的定位。 2.限制z-index层级。 限制后relative的层级高低决定了absolute的层级...
  • screaming_color
  • screaming_color
  • 2016-03-05 00:17:02
  • 623

【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧...
  • xuan0107
  • xuan0107
  • 2015-06-04 14:23:00
  • 864

position定位属性中absolute和relative的区别

提问:如果页面内某个元素没有设定position属性,那么他是否具有position属性? 回答:具有position属性,并且属性值是static。原因在于网页里任一元素的默认position属性...
  • qq_17767355
  • qq_17767355
  • 2016-04-04 15:35:14
  • 2074

position ="absolute" 与 position="fixed的异同"

position ="absolute" position="fixed"  相同点 第一,完全脱离标准文档流 第二,未设置偏移量时,都定位在父元素左上角 不同点一:  设置偏移量时,偏移量...
  • u012079603
  • u012079603
  • 2015-01-22 15:30:28
  • 821
收藏助手
不良信息举报
您举报文章:position 使用 relative, absolute, fixed 的区别
举报原因:
原因补充:

(最多只允许输入30个字)