文章关键字 ‘z-index’

一行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相对少了写,但是,应该不会影响您的阅读与理解的。本文书写还是花了好些功夫的,力求准确表述自己观点的同时语言通俗生动。总之,希望本文能对您的学习有所帮助。

阅读全文…

CSS实现跨浏览器的box-shadow盒阴影效果(2)

2010年07月27日,星期二

我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”,本文虽然题目类似,但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,但是使用的是shadow滤镜,这种滤镜的效果很牵强,效果过渡不自然,而本文实现的IE下的盒阴影效果就相对非常自然,而且还支持内阴影的UI表现。

本文提供各个效果截图,提供丰富飞实例以及代码展示,希望能对您的学习有所帮助。

阅读全文…

酷酷的jQuery鼠标悬停图片放大切换显示效果

2009年12月25日,星期五

缩略图放大显示效果截图
介绍一个蛮酷的图片缩略图放大预览的效果,外带图片切换显示功能。动画显示,投影样式,效果不错。提供demo页面,提供源文件下载,希望对您有所帮助。

阅读全文…

IE6下z-index犯癫不起作用bug的初步研究

2009年12月24日,星期四

CSS中,z-index是个内容繁多,牵连甚广的知识点,CSS手册中的那点知识那就是冰山一角。如果深入研究,牵涉到border及background的堆叠模型,同级显示问题,同级牵连显示问题,以及浏览器处理显示的机制等,我可能表述有些含糊,但确确实实z-index蕴含着很深的知识点。
我在z-index的研究上面的功夫还不够,所以一些深入的东西我是没有信心讲好的。不过本篇文章可以说是做了个不错的表面功夫,详细的阐述了IE6下两个常见的z-index层级bug,有理有据,一步步细致分析,提供代码演示,提供demo页面,希望对您的学习能有所帮助。

阅读全文…