又发现一种无需绝对定位就可以元素重叠的CSS技巧

这篇文章发布于 2023年03月15日,星期三,23:48,归类于 CSS相关。 阅读 11695 次, 今日 14 次 6 条评论

 

花朵封面

一、温故而知故

元素重叠的经典方法就是绝对定位,偶尔也会使用margin负值定位,不展开,大家都懂的。

然后前年我还介绍了另外一种元素重叠的方法,那就是使用grid布局进行重叠,详见文章:“使用grid-area等Grid布局属性轻松实现元素层叠效果”,这个方法非常好用。

代码示意:

<figure>
    <img src="11.jpg">
    <figcaption>上海钓鱼自然风景 by zhangxinxu</figcaption>
</figure>
figure {
    display: inline-grid;
}
figure > img,
figure > figcaption {
    /* 还可以简写为 grid-area: 1 / 2 */
    grid-area: 1 / 1 / 2 / 2;
}

效果如下所示,图片标题信息在图片上方显示了。

元素重叠效果示意

然后,最近,我又发现了一个新的元素重叠方法,介绍给大家。

二、container属性与元素重叠

所有具体尺寸收缩特性的元素,设置为容器元素后,其宽度尺寸都会变成0。

这些元素,包括任意的display计算值是inline-*的元素,浮动元素,绝对定位元素,flex子项,或者width宽度值设置fit-content的元素。

例如:

.element {
    float: left;
    container-type: inline-size;
}

此时,.element元素占据的宽度一定是0。

宽度0

我们就可以利用这里特性实现元素重叠效果。

还是那上面出现的图文排版示意,由于图片本身就有内在尺寸,因此,就算变成container容器也不会宽度是0,所以,我们可以在外面再嵌套一层标签,于是,HTML结构是这样的:

<figure>
    <span><img src="11.jpg"></span>
    <figcaption>上海钓鱼自然风景 by zhangxinxu</figcaption>
</figure>

此时,通过下面的CSS代码,就可以实现我们想要的布局效果了:

figure {
    display: inline-flex;    
}
figure > span {
    container-type: inline-size;
}
figcaption {
    width: 256px;
    align-self: end;
    text-align: center;
    background-color: #0009;
    color: #fff;
    z-index: 1;
}

实现的效果如下图所示:
元素重叠效果示意

眼见为实,您可以狠狠地点击这里:CSS container-type元素重叠布局demo

如果希望高宽尺寸都是0,可以试试设置container-type属性值是size

container-type: size;

绝对定位重叠,元素完全脱离文档流;Grid重叠,宽高一致强制位置重合;而container重叠则是通过宽度为0达到重叠效果。

三种重叠机制各异,也有各自适合使用的场景,大家根据实际情况酌情选择。

另外,container-type是一个新的CSS属性,大家使用的时候注意下兼容性:

container-type属性的兼容性

三、扯淡时间到了

正文结束,扯淡时间到了,相比技术,很多人更喜欢看最后的碎碎念,那我今天就扯多一点。

昨天车子开的好好的,突然一声巨响,我还以为撞护栏,车子废了呢。

下车一看,车身正常,反光镜也在,什么情况,定睛一看,好家伙,轮胎瘪了,直接爆胎了,轮毂都崩坏了,才意识到,原来刚才的巨响是爆胎,还好不是高速,是在市区。

爆胎图

妈呀,这个轮胎才换了没一个月吧,我这车加起来,所有轮胎都换了2遍了都,吉马斯的轮胎,质量太差了,还死贵,475一条,且已经不生产了,这所谓的静音轮胎,就是个👎。

后来叫了平安的拖车,拖到家附近修车店门口,第二天一早换轮胎去了。

这次我忍无可忍,直接换牌子了,换国产的,470多的轮胎换成370多的,心情瞬间美丽了,早几年就应该这么干了。

明天开新轮胎上班了,希望这两个胎能够坚持到我卖车。

如果又是半年不到就坏了,那可能就是我自己的问题了,整天钓鱼,户外复杂路况开多的缘故?

管它呢。

😒😒😒

(本篇完)

分享到:


发表评论(目前6 条评论)

  1. happmaoo说道:

    文章右侧的视频太吵了,自动播放!

  2. BobYang说道:

    吉马斯是什么牌子,正新玛吉斯?
    据内部员工说正新轮胎的质量真的不忍直视,偷工减料什么的都有。

  3. meepo说道:

    [整天钓鱼,户外复杂路况开多的缘故?]

    是了 (大笑)

  4. doramx说道:

    今天的课程很轻松呀