文章关键字 ‘z-index’

了解infinity、pi等CSS calc()计算关键字

2024年07月15日,星期一

封面图-蒲公英

CSS calc()计算函数又新增了infinity,NaN,pi等关键字,都来了解下是干嘛用的吧。

阅读全文…

聊聊Top Layer顶层特性的隐患与实践

2024年06月11日,星期二

封面图,海边,沙滩,救生圈

最近尝试在Dialog对话框组件中大肆使用顶层特性,以便减少z-index这类层级的判断,结果发现事情并没有预想的那样顺利,顶层特性也是有隐患的,好在有低成本的解决方法。

阅读全文…

时代变了,该使用原生popover属性模拟下拉了

2024年01月11日,星期四

封面图

Firefox也正式支持popover属性了,大人,时代变了,所有的下拉效果要换种实现方式啦。

阅读全文…

更好的纯CSS滚动指示器技术实现

2019年06月8日,星期六

滚动指示器封面图

我们可以使用纯CSS显示页面滚动百分比进度,传统实现是在body标签上做文章,但有致命缺陷,后来我借助混合模式实现了一种新方法,此方法可以规避传统实现的不足,使纯CSS滚动指示器效果在实际项目中应用成为了可能。

阅读全文…

一行CSS实现滚动时藏在信息流后面的广告效果

2018年07月14日,星期六

夏日炎炎,今天宅在家里刷微博的时候,刷到了个关于信息流广告的视频,说的是某产品信息流在阅读时候,后面会腾空出现广告,就像广告一直藏在你信息流的背后一样,随着你滑动,广告会慢慢看不到。这个广告效果在web中该如何实现呢?

我就把几个idea都试验了下,发现都可以实现类似的效果,一起来看看吧……

阅读全文…

深入理解CSS中的层叠上下文和层叠顺序

2016年01月9日,星期六

本文是最近1-2个月最用心的文章,理解本文内容,就会明白网页中元素层叠的时候为什么会这样表现了,相信本文的内容一定会对您的学习有所帮助的。

阅读全文…

CSS相对定位|绝对定位(五)之z-index篇

2011年08月9日,星期二

本文是CSS相对定位绝对定位系列的最后一篇,简单讲讲z-index。主要内容是讲目前z-index滥用的一个情况。其次是讲了下自己避免z-index混乱使用而采用的分门别类下的1,2,3应用规则。本文没有demo,没有源代码展示,只有一些截图。内容相对前面几篇要少很多,但也精炼了。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

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

2011年08月6日,星期六


本文是相对定位/绝对定位系列之四——relative相对定位篇。前面部分比较随性,以讲故事的形式介绍relative相对定位的一些属性特点。后面为本文重点,讲述的是relative相对定位的最小化影响原则。有demo,有实例,有截图以及必要的源代码展示。总之,希望本文的内容对您的学习有所帮助。

阅读全文…

jQuery powerFloat万能浮动层下拉层插件

2010年12月16日,星期四

jQuery powerFloat万能浮动层下拉层插件

本文就是介绍自己最近一直在整的一款jQuery插件,名为powerFloat,中文名为万能浮动层插件。顾名思意就是可以实现基本上一切与某元素有位置关系的浮动效果。插件虽然强大,但是考虑到API的精炼,虽然制定了不少特殊的规则,所以此插件在学习成本上比一般的插件要高一点。这也是为何本文的内容会比较长的原因。其他就不多说了,虽然王有婆卖瓜的味道,但是我还是要说这个插件还是挺不错的。如果您对其中的规则都熟悉的话,会对您开发制作页面有很大的帮助的。主要是省掉了很多的功夫。

阅读全文…

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

2010年12月9日,星期四

本文是CSS 相对/绝对(relative/absolute)定位长篇系列的第一篇,大部分的内容被理论观点和题外话给占据了。本文主要内容就是分析了absolute与浮动之间的关系,一些典型的特性。还阐述了自己尽量不要使用absolute属性做普通DOM布局的观点。相对于本篇的文字量,图片啊代码啊以及demo相对少了写,但是,应该不会影响您的阅读与理解的。本文书写还是花了好些功夫的,力求准确表述自己观点的同时语言通俗生动。总之,希望本文能对您的学习有所帮助。

阅读全文…