CSS 相对|绝对(relative/absolute)定位系列(一)

1. 绝对定位和浮动元素是近亲:都具备包裹性和破坏性

包裹性:包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度

破坏性:浮动的破坏性在于切断line box链,致使高度塌陷,但由于浮动元素仍在凡间(DOM tree),实体是看得见摸得着的,所以其占据的实体位置还是在的。而absolute绝对定位不仅让高度塌陷,又由于从未深入凡间,在凡间没有他的实体位置,所以宽度也是塌陷的

2. position:absolute的滥用

首先自己是个流体布局控,绝对定位这种东西,显然没有流动的气质,尤其拿来定位后(虽然有时候在relative的庇护下也有一定的流动性)。流动性布局很强调不定宽,不定高,活用标签自身属性,顺其自然,最少干预。但是由于absolute属性(尤其是带有left/top值)的破坏性,会导致高宽塌陷,于是,不得已,需要设定一个高度值(或是足以撑开高度的值),例如新浪微博导航就是绝对定位,于是,导航外标签必须定高,否则,下面的元素会上来发生重叠

这里写图片描述

3. 常见absolute布局的替代实现方案

我们极易先入为主地认为absolute的价值就是借助left/top属性来进行定位的。说句不严谨的话,目前估计超过90%的普通布局中的absolute属性都是用在定位上了。恩,这个回头再说,这里还是看看一些常见的absolute布局如何通过使用其他属性完成同样的布局效果。既然absolute属性是拿来定位,我们只要使用其他属性定位就可以了。此时,自然而然想到了CSS中另外一个更加低调全能的定位属性margin,下面的前两个例子都是使用margin代替absolute及相关属性。

首先拿京东商城首页的一个标价样式举例,见下截图:

这里写图片描述

用小bug一看其code实现,果然是绝对定位+定位属性

这里写图片描述

要是我来实现,就不会使用absolute属性,会使用margin实现扩展性容错性更强的布局

这里写图片描述

这里写图片描述

因为价格是一个占据整行的div且位置和手机的位置在水平方向上始终是一样的,所以只要设定固定的margin就能保证不论是改变父容器宽度或者定位方式都可以很好的展现,同时将标价外面的div标签改为inline水平元素的标签方便inline-block化(行内元素设置了position属性或float属性后属性默认变成inline-block,所以可以设置宽高,span 是行内元素,不设display=”block”或“inline-block”是没办法设宽高的)

4. absolute可以一个人战斗

我们需要意识到,一个应用的position:absolute的元素,其实就只是个非常普通的元素,我感觉与应用了float:left的差异仅仅在于宽度的缺失

这里写图片描述

点击示意的按钮后,可以发现图片还是那个图片,还在那个位置,还是那么的安静与优雅。唯一变化的就是文字们有的跑到它的下面了(宽度缺失)

这里写图片描述

由此可见,absolute属性只是个很普通的属性,跟float:left是个近亲。一个是陨落凡间的恶魔,一个是天空中的恶魔。所以,很多时候,我们在普通布局中使用到absolute时候,只要单单设置一个position:absolute就可以了,至于left/top之类的都是浮云,涉及到定位什么的就把该元素当作普通元素,使用margin进行定位,一样有着刮目的表现的

总结:

1.无依赖的绝对定位元素其一的属性是脱离文档流

2.无依赖的绝对定位元素(不受relative限制的absolute定位,行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值)存在一个非常大的特效,就是位置跟随性,也就是这个元素在普通元素的时候呆在什么位置,绝对定位之后就还是呆在什么位置,原来是block属性absolute之后还是block属性,原来是inline-block属性absolute之后还是inlne-block属性

3.在设置了overflow属性的元素内部设置的absolute元素,是不会受到overflow属性的限制的,即使设置为hidden

4.绝对定位的元素虽然具备跟随的特性,但是如果我们想精确的进行定位,那么应该使用margin,这里和普通元素使用margin的效果是一样的

5.生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页