CSS
如何把txt改为css
把txt改为css的方法：首先打开“我的电脑”；然后在“工具->文件夹选->查看”中，把隐藏已知文件扩展名前的对勾去掉；接着找到需要修改的txt文件；最后将该文件的后缀名修改为“.css”即可。首先打开“我的电脑”，点击工具 －文件夹选项－查看－在中间的高级设置中，把隐藏已知文件扩展名前的对勾去掉． 确定．然后找到需要修改的txt文件；接着将该文件的后缀名修改为“.css”即可。
16个天马行空令人印象深刻的CSS3 HTML5实例
关于CSS3我们已经说了很多年了。现在终于看到很多童鞋开始深入研究并将一些高效有意思的功能放进各自的项目中去，看了很高兴。这两年随着HTML5的迅速崛起。这两者的结合将是未来不可避免的一个趋势。网页设计在沉静的N多年后终于开始诠释了设计的概念。很多公司也开始考虑深入交互和体验。这是互联网的一小步，网页发展的一大步。关于未来总是在超乎我们想象中的未来。很多可能都是在现在懵懂后的不断尝试中发现和得到的。今天我们要分享的是16个天马行空的CSS3&HTML5的尝试。这些尝试让人印象深刻。希望大家能够喜欢。Css3d CloudsExperiments Wave 03One Hour Per SecondClock
CSS3实例教程：详解Media Queries片段
Responsive设计在现代Web设计中可谓是越来越流行，但很同学们并未理解其真正的设计概念，往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例，但如何取其断点左右纠结，如何设置哪几个断点？又从何入手？Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板、使用em单位创建CSS3的Media Queries和iPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段，以供大家参考：在这里主要分成三类：移动端、PC端以及一些常见的响应式框架的Media Queries片段。 @media screen and (device-aspect-ratio: 40/71) {}或者：@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){} iPhone 5 In Portrait & Landscape @media only screenand (min-device-width : 320px)and (max-device-width : 568px){// CSS Style} iPhone 5 In Landscape @media only screenand (min-device-width : 320px)and (max-device-width : 568px)and (orientation : landscape){// CSS Style} iPhone 5 In Portrait @media only screenand (min-device-width : 320px)and (max-device-width : 568px)and (orientation : portrait){// CSS Style} iPone4 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {} iPhone 3G @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){} iPhone /*Landscape*/@media screen and (max-device-width: 480px) {}/*Portrait*/@media screen and (max-device-width: 320px) {} Blackberry Torch @media screen and (max-device-width: 480px) {} Samsung S3 @media only screen and (-webkit-device-pixel-ratio: 2) {} Google Nexus 7 @media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {} Samsung Galaxy S3 @media only screen and (-webkit-device-pixel-ratio: 2) {} Samsung Galaxy S2 @media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {} Galaxy Tab 10.1 /*Landscape*/@media (max-device-width: 1280px) and (orientation: landscape) {}/*Portrait*/@media (max-device-width: 800px) and (orientation: portrait) {} iPad In Portrait & Landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px){// CSS Styles} iPad In Landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape){// CSS Styles} iPad In Portrait @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait){// CSS Styles} Retina iPad In Portrait & Landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 2){// CSS Styles} Retina iPad in landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2){// CSS Styles} Retina iPad in portrait @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 2){// CSS Styles} iPad Mini In Portrait & Landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 1){// CSS Style} iPad Mini In Landscape @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 1){// CSS Style} iPad Mini In Portrait @media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 1) {// CSS Style} 桌面端 320px @media screen and (max-width: 320px) {} 640px @media screen and (max-width: 640px) {} 800px @media screen and (max-width: 800px) {} 1024px @media screen and (max-width: 1024px) {} 1028px @media screen and (max-width: 1028px) {} 除了上面的常见Media Queries片段之外，下面的网站还提供了一些其他的片段： /*URL:http://html5boilerplate.com/*/ /* Smartphones (portrait and landscape) ----------- */@media only screenand (min-width : 320px)and (max-width : 480px) {/* Styles */}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {/* Styles */}/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* Styles */}/* iPads (portrait and landscape) ----------- */@media only screenand (min-width : 768px)and (max-width : 1024px) {/* Styles */}/* iPads (landscape) ----------- */@media only screenand (min-width : 768px)and (max-width : 1024px)and (orientation : landscape) {/* Styles */}/* iPads (portrait) ----------- */@media only screenand (min-width : 768px)and (max-width : 1024px)and (orientation : portrait) {/* Styles */}/* Desktops and laptops ----------- */@media only screenand (min-width : 1224px) {/* Styles */}/* Large screens ----------- */@media only screenand (min-width : 1824px) {/* Styles */}/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */} Bootstrap的Media Queries /*URL:http://twitter.github.com/bootstrap*/ /* Large desktop */@media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */@media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */@media (max-width: 767px) { ... } /* Landscape phones and down */@media (max-width: 480px) { ... } Foundation的Media Queries /*URL:http://foundation.zurb.com/*/ /* We use this media query to add styles to any device that supports media queries */@media only screen { }/* Used to alter styles for screens at least 768px wide. This is where the grid changes. */@media only screen and (min-width: 768px) {}/* Used to alter styles for screens at least 1280px wide. */@media only screen and (min-width: 1280px) {}/* Used to alter styles for screens at least 1440px wide. */@media only screen and (min-width: 1440px) {}/* Apply styles to screens in landscape orientation */@media only screen and (orientation: landscape) {}/* Apply styles to screens in portrait orientation */@media only screen and (orientation: portrait) {} Skeleton的Media Queries /*URL:http://www.getskeleton.com*/ /* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) {}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {} FRAMELESS的Media Queries /*URL:http://framelessgrid.com/*/@media screen and (max-width: 16.875em){}@media screen and (min-width: 32.5em) and (max-width: 37.4375em), screen and (min-width: 45em) and (max-width: 56.9375em), screen and (min-width: 77.5em) and (max-width: 102.4375em), screen and (min-width: 135em){}@media screen and (min-width: 102.5em) and (max-width: 117.9375em), screen and (min-width: 150em){}@media screen and (min-width: 15em){}@media screen and (min-width: 30em){}@media screen and (min-width: 37.5em){}@media screen and (min-width: 57em){}@media screen and (min-width: 57em) and (max-width: 117.9375em){}@media screen and (min-width: 118em){} Susy的Media Queries /*URL:http://susy.oddbird.net/*/@media (min-width: 29em) {}@media (min-width: 30em) and (max-width: 60em) {}@media (min-width: 119em) {}@media (min-width: 33.75em) and (max-width: 67.5em) {}@media (min-width: 33.75em) and (max-width: 67.5em) {} Less Framework 4 /*URL:http://lessframework.com/*/ @media only screen and (min-width: 768px) and (max-width: 991px) {}/* Mobile Layout: 320px (20em). */@media only screen and (max-width: 767px) {}/*Wide Mobile Layout: 480px (30em)*/@media only screen and (min-width: 480px) and (max-width: 767px) {} Golden Grid System的Media Queries /*URL:http://goldengridsystem.com/*//* @media screen and (min-width: 640px) */@media screen and (min-width: 40em) {}/* @media screen and (min-width: 720px) */@media screen and (min-width: 45em) {}/* @media screen and (min-width: 888px) */@media screen and (min-width: 55.5em) {}/* @media screen and (min-width: 984px) */@media screen and (min-width: 61.5em) {}/* @media screen and (min-width: 1200px) */@media screen and (min-width: 75em) {}/* @media screen and (min-width: 1392px) */@media screen and (min-width: 87em) {}/* @media screen and (min-width: 1680px) */@media screen and (min-width: 105em) {}/* @media screen and (min-width: 1872px) */@media screen and (min-width: 117em) {}/* @media screen and (min-width: 2080px) */@media screen and (min-width: 130em) {} Fluid baseline的Media Queries /*URL:http://fluidbaselinegrid.com/*//* MOBILE PORTRAIT */@media only screen and (min-width: 320px) {}/* MOBILE LANDSCAPE */@media only screen and (min-width: 480px) {}/* SMALL TABLET */@media only screen and (min-width: 600px) {}/* TABLET/NETBOOK */@media only screen and (min-width: 768px) {}/* LANDSCAPE TABLET/NETBOOK/LAPTOP */@media only screen and (min-width: 1024px) {}@media only screen and (min-width: 1280px) {}/* WIDESCREEN *//* Increased body size for legibility */@media only screen and (min-width: 1400px) {} 320andUP /*URL:http://stuffandnonsense.co.uk/projects/320andup*/@media only screen and (min-width: 480px) { /* 480 */}@media only screen and (min-width: 600px) { /* 600 */}@media only screen and (min-width: 768px) { /* 768*/}@media only screen and (min-width: 992px) { /* 992*/}@media only screen and (min-width: 1382px) { /* 1382 */ }@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* 2x*/} Gridless /* URL:http://thatcoolguy.github.com/gridless-boilerplate/ */@media only screen and (min-width: 480px) { /* Wide mobile (480px+) styles go here */}@media only screen and (min-width: 768px) { /* Tablets/netbooks (768px+) styles go here */}@media only screen and (min-width: 1024px) { /* Desktops (1024px+) styles go here */} TotanTHEMES /*URL:http://titanthemes.com/*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 989px) {}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {} Responsive Grid System /*URL:http://responsive.gs/*/ @media (max-width: 480px) {} @media (min-width: 480px) and (max-width: 768px) {} @media (min-width: 768px) {} @media (min-width: 1024px) {} @media (min-width: 1200px) {} 本文搜集的是Media Queries在各种设备下的代码片段，希望这些片段能帮大家更好的理解Responsive断点的设置。如果大家有更好的方案，希望能在评论中分享。前提设置body的字体为100%。其具有一个简单的计算公式：100% = 16px = 1em = 14pt
HTML5+CSS3城市场景动画教程
最近一直在研究HTML5的动画表现，特别是在移动设备上的呈现。在上一篇文章《盛开的CSS3梦幻荷花》中提到如何用css3制作丰富动画效果的两个思路，当然除此之外，结合使用javascript脚本语言将可以实现更加强大的动画效果以及交互动作。 今天就为大家分享一个用HTML5+CSS3制作的城市场景动画，动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果；除此之外，页面的视觉效果采用了插画的设计风格，希望大家会喜欢。这个示例中的HTML结构采用了HTML5的语言来编写，代码将更加的简洁、结构更加清晰易懂。从下面的代码可以看出示例中的每个元素是独立的，最后再重组成一个完整的动画效果。<section><div class="stage"><div class="nightOverlay"></div><div class="skyline"></div><div class="beans"></div><div class="ground back"></div><div class="ground mid"></div>
CSS教程：HOVER伪类选择符的多重影分身之术
E:hover伪类选择符，是我们最熟悉不过的一个伪类了，而且运用也是非常的广泛，可以说在互联网中每个网站上面都会出现它的影子。我们不可否认已经对这个伪类选择符已经是相当的熟悉，但你是否真正的将它的功能发挥到淋漓尽致呢？嘿嘿……只要善于发现，我们就可以创造出非常有意思的东西来，大家是否还记得之前的分享给大家的一篇文章《创意CSS技巧：看图购》，这篇文章就是一个很好的示范，建议在读完这篇文章后，可以去看看这篇文章的效果以及设计原理，多想一想，多做一做。在这篇文章中就是巧妙的运用了hover的功能属性，出现了很多让人印象深刻的充满神奇的效果。其主要的原理是不变的，只是我们更加巧妙的设置多个层hover的效果，那今天将为大家详细的解读hover伪类选择符的多重影分身之术！我们将用例子来为大家做详细的介绍，先来看看这一组的伪类选择符： .main:hover { opacity: 0.5; /*---- 组一 ----*/}.main a:hover { opacity: 0.5; /*---- 组二 ----*/}.main:hover a { opacity: 0.5; /*---- 组三 ----*/}.main ul:hover a { opacity: 0.5; /*---- 组四 ----*/}.main:hover ul:hover a:hover { opacity: 0.5; /*---- 组五 ----*/}.main a:not(:hover) { opacity: 0.5; /*---- 组六 ----*/} 这些选择符你都能一一的了解其中的含义吗？其实我们稍加细心分析就能马上判断这些都代表了什么。我们理清楚了hover伪元素在不同地方以及出现多个hover时的基本原理，那我们就来看看一个实际的例子，在这个例子中简单的通过上面的分析总结，在多个地方巧妙的运用了hover伪元素，实现了具有很强交互性的三排列表效果。 首先是我们的一个简单的HTML结构： <div id="all"> <ul> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> </ul> <ul> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> </ul> <ul> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> </ul></div> 然后我们最上面的结构进行hover的多重影分身处理，看css代码： body {margin:0; padding:0;}#all {margin:100px auto; padding:0; width:630px;}#all > ul { list-style: none; float: left; width: 200px; padding: 0 10px 0 0;}#all a { text-decoration: none; display: block; padding: 10px; background: #900; border-radius: 20px; color: white; text-align: center; margin: 0 0 5px 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease;}#all:hover a { opacity: 0.2;}#all:hover ul:hover a { opacity: 0.5;}#all:hover ul:hover a:hover { opacity: 1;} 关于hover伪类选择符的多重影分身之术就介绍到这里了，hover伪元素是个很有趣的东西，网上也有很多特效是利用hover来实现，就像本站（觉唯前端）的发布过的一篇文章《因为CSS3，动画将一切皆有可能》，其中的鼠标经过时显示动画就是运用了上面所说的组六原理，用hover伪类选择符结合否定伪类选择器来实现的。我相信关于hover还有很多实用的技巧还没挖掘出来，那么接下来为hover伪元素创造奇迹的你，还在等什么呢……
CSS实例教程：使用伪元素制作时尚焦点图相框
在css标签中有这样子的标签div:before、div:after，对于before、after来说有部分人是相当陌生的，那么这两个标签是什么呢？有什么用处？:befor、:after是CSS的伪元素，什么是伪元素呢？伪元素用于向某些选择器设置特殊效果。 我们用CSS手册可以查询到其基本的用法：既然说到了before、after，那么我们也要大概的了解下content，content用来和:after及:before伪元素一起使用，在对象前或后显示内容。基本的用法如下： div:after{content:'任意字符串';} 现在我们大概知道before和after的大概用法了，那么我们就可以在元素的内容之前或者之后插入新内容。而插入的内容我们也可以用css样式来加以控制和美化。也许在平常中这样子的标签用处不大，但是存在即是真理，哈哈，肯定有他的妙用之处，今天就来看看利用before和after制作的一个创意的时尚焦点图相框，以后制作这种边框线的时候我们可以完全抛弃图片的做法，而且做出来的非常的精美。不信，就请先看看效果demo吧：查看预览下载附件1、 在图片层加多一层div，设置1像素的边框线，边框线有上下左右四条边框，而我们想要的只是每两条边框线组成的类似小三角形的形状，那么我们只要把四条边框线的中间部分去掉，那不就实现了我们的效果。那我们应该怎么把四条边框线中间部分去掉？或者用什么东西把他盖住，不让他显示出来？解决办法就是，我们知道before和after伪元素可以在元素之前或者之后添加新的内容，那我们就利用这两个伪元素来盖住四条边框线的中间部分。 2、 我们先去掉左右两边的边框线，在边框层，利用before伪元素，使用css样式的定位，设置白色边框，为什么要白色的边框呢？因为要把之前的左右边框中间部分遮掉，颜色设置成和背景色（本例的背景为白色背景）一致，这样子看起来就相当于中间部分被裁剪掉了。 3、我们继续去掉上下两条边框线，方法同上，利用after伪元素，使用css样式的定位，设置为白色边框，遮掉上下边框线的中间部分。这样子一来，基本的形状就出现了 4、美化步骤，调整我们的细节，边框线调整为虚线。 了解了基本的思路和方法，是不是很简单呢？那我们就开始动手写代码吧。 <div class="content"><ul> <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_1.jpg" /> <p class="focus"></p></a></li> <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_2.jpg" /> <p class="focus"></p></a></li> <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_3.jpg" /> <p class="focus"></p></a></li> <li id="noborder"><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_4.jpg" /> <p class="focus"></p></a></li></ul></div> CSS样式代码 .content {width:788px; margin:auto; height:auto; overflow:hidden; padding:30px; }.content ul li {float:left; height:176px; border-right:1px solid #DDDDDD; position:relative; padding:10px;}.focus {background:rgba(250,250,250,0.25); width:174px; height:174px; border:1px dashed #666; position:absolute; left:10px; top:10px; display:none;}.focus:before {width:174px; height:134px; border-left:1px solid #fff; border-right:1px solid #fff; content:''; position:absolute; left:-1px; top:20px;}.focus:after {width:134px; height:174px; border-top:1px solid #fff; border-bottom:1px solid #fff; content:''; position:absolute; top:-1px; left:20px;}.content ul li:hover .focus {display:block;}#noborder {border-right:0 none;} 通过这个例子是不是很方便的把这个效果做出来了呢？而且看看我们的代码，是不是很简洁呢！哈哈……或许还有更好的方法来实现，我们可以一起探讨。我个人感觉其实div+css是很好的一门很容易手上但是功能性很强的技术，而且他很好玩很有趣。利用你的奇思妙想， 你可以做出各种意想不到的效果。期待你的作品哦。查看预览下载附件
2012年排名前20位的CSS网站作品欣赏
2012年涌现出众多独特的，令人印象深刻的 CSS 网站作品，要从中挑选出年度应用 CSS 的最佳网站列表一个严峻的挑战，因为 CSS 涵盖了媒体查询（CSS3 Media Queries）、CSS 动画和3D转换等众多特性。我根据过去 CSS 典型的应用场景挑选了其中的优秀作品组成一个列表，如果你有收藏更好的作品，欢迎留言向大家分享。1. Beercamp这个啤酒节的活动网站充分应用了 3D CSS Transform 技术，充满立体感的旋转和折叠效果。2. SpelltowerSpelltower 不仅是一个令人上瘾的游戏，它也有一个网站，充满乐趣和个性。使用的俏皮动画和过渡效果，让你想抓住一个 iPhone 并启动游戏。3. Envy LabsEnvy Labs 的其中一个标语是“我们创造的乐趣”。采用CSS3 Transform 和 Transition 呈现一个很有趣的旋转木马！
z-index属性的使用方法和层级树CSS教程
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.这个星期我们团队做了一次内部的技术分享, 南瓜小米粥为我们分享了他对 CSS z-index 的理解和引入层级树这个概念. 这个分享的现场效果很好, 所以我也将 z-index 和层级树话题搬到博客来谈一谈.本文谈及多个影响节点显示层级的规则, 其中用到的所有例子全部罗列在《position 属性和 z-index 属性对页面节点层级影响的例子》中.如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点. <div id="a">A</div><div id="b">B</div> 如果将 position 设为 static, 位于文档流后面的节点依然会遮盖前面的节点浮动, 所以position:static不会影响节点的遮盖关系. <div id="a" style="position:static;">A</div><div id="b">B</div> 如果将 position 设为 relative (相对定位), absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者比后者的默认层级高. <div id="a" style="position:relative;">A</div><div id="b">B</div> 在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.