文章分类 -  CSS

position:relative/absolute无法冲破的等级
摘要：前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题：<ul> <li>第一块</li> <li><span>第二块</span></li> <li>第三块</li> <li>第四块</li> <li>第五块</li> &l... 阅读全文
posted @ 2010-11-01 15:14 庙子 阅读(162) 评论(0) 推荐(0)
解读absolute与relative
摘要：很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。Absolute，CSS中的写法是：position:absolute; 他的意... 阅读全文
posted @ 2010-11-01 15:04 庙子 阅读(214) 评论(0) 推荐(0)
全透视:CSS Z-index 属性 [7]
摘要：Stu Nicholls所做的CSS实验：Stu Nicholls在他的网站 CSSplay 中阐释了众多的CSS的案例。下面是一些关于z-index属性的作品。CSS 图片地图CSS 游戏CSS模仿框架增强版的层叠布局：24 ways 这个网站以Z-index为工具来提升它的模板体验，将年份和日期的长度、宽度延伸到和网站外层容器同等并相互交织，创造出了一个非常有趣的效果。奇异的网摘栏：Janko... 阅读全文
posted @ 2010-11-01 11:18 庙子 阅读(126) 评论(0) 推荐(0)
全透视:CSS Z-index 属性 [6]
摘要：画廊效果的图片展示：将JQuery animation和Z-index组合可以创造出幻灯片或画廊式的卓越效果。usejquery.com 网站中的这个demo向我们展示了这两者的绝妙组合带给我们的惊喜。Polaroid Photo Gallery by Chris Spooner 采用功能更为强大的CSS3同Z-index配合，创造出了一个当鼠标划过时会重新码放的超cool效果。在Fancy Th... 阅读全文
posted @ 2010-11-01 11:11 庙子 阅读(119) 评论(0) 推荐(0)
全透视:CSS Z-index 属性 [5]
摘要：CSS 气泡：Z-index 属性还可以用来实现基于CSS的提示气泡，就像下面trentrichardson.com展示的那样Light Box：如果不是因为应用了z-index 属性，现在也不会有那么多的品质优秀的Light Box脚本可以免费使用，比如说JQuery的一个插件FancyBox。Light box 脚本使用半透明的PNG图片来使背景变暗，之后拿来一个新的元素，经常会使用类似窗口的... 阅读全文
posted @ 2010-11-01 11:09 庙子 阅读(122) 评论(0) 推荐(0)
全透视:CSS Z-index 属性 [4]
摘要：Firefox 2中的负值：在Firefox2版本中，一个负的Z-index值会使元素位于stacking context的后面，而不是位于公认的背景和边框这样的元素stacking context之前。下面的截图展示了这个Firefox 2的BUG。下面的是上面截图的HTML版本（限于目前博客所限，做不到能够像Smashing Magazine那样的内容部分显示code demo，需要查看原始实... 阅读全文
posted @ 2010-11-01 11:05 庙子 阅读(121) 评论(0) 推荐(0)
全透视:CSS Z-index 属性 [3]
摘要：运用JavaScript如果你希望通过JavaScript为一个元素动态的加上Z-index 属性，其语法同其他大部分CSS元素能被存取类似，就是使用“驼峰命名法”取代CSS属性中的连字符，就像下面的代码展现的那样。var myElement = document.getElementById(”gold_box”); myElement.style... 阅读全文
posted @ 2010-11-01 10:58 庙子 阅读(161) 评论(0) 推荐(0)
全透视:CSS Z-index 属性 [2]
摘要：为什么它会产生混乱？即使Z-index并不是一个难以理解的属性，但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。为了证明Z-index只能工作于被定位了的元素中，这里有同样的三个BOX，它们应用了Z-index属性来尝试打破他们自然的层叠顺序。灰色的BOX具有&ldq... 阅读全文
posted @ 2010-11-01 10:55 庙子 阅读(121) 评论(0) 推荐(0)
全透视:CSS Z-index 属性 [1]
摘要：大多数的CSS属性都很容易使用。常常，当您对标记语言的元素使用CSS属性时，产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性，却会有一些复杂，且只能在给定的环境下才会工作。Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致（兼容性）上的混乱和（开发者心理上）的挫败感。但滑稽的是，一旦你真正理解了Z-index，你会发现它却是一个非常容易使用的属... 阅读全文
posted @ 2010-11-01 10:51 庙子 阅读(133) 评论(0) 推荐(0)