html/css中关于轮播图的叠层和居中

关于叠层和居中

  小弟初出江湖，错误之处敬请见谅。

  制作类似于淘宝网首页的轮播图片效果，我们不可避免的会遇到有关叠成和居中的问题。以下是我参考网上各位大牛共享的总结

  一、叠层问题

  轮播图的效果即是同一区域内依次轮流显示图片，这也就需要我们将若干张图片放置于同一区域。实现这一功能一般要用到Css中的Positon属性。其有四个值，默认为static（遵循基本定位规定），我们将用到的是absolute和relative。

  Absolute是绝对定位，定位方式是TRBL（top、right、bottom、left）。可以z-index分级。若元素的父级未设置定位属性，那么将以body原点定位。若设置了，则以父级原点定位。

  Relative是相对定位，确切的说是相对自身位置的定位。定位方式、分级与上相同。但注意它是不可叠层的，不可叠层的，不可叠层的，重要的事情说三遍。

  所有，我们做叠层效果时，做好父级元素后，要对子级元素设置absolute绝对定位（因为relative相对定位是不叠层的）。Absolute效果会使元素脱离原本的文本流，因而其可以叠层；而relative效果并不会使元素脱离文本流，因而它不能产生叠层。

  二、居中问题

  这里我主要说说auto实现的自动计算居中效果。我以body作为父元素，子元素以absolute设置好绝对定位（left:0  top:0）和自身模块的宽度，那现在我是不是可以对子元素模块”margin：0px auto;”来实现未知宽度的浏览器都达到居中显示的效果呢？经实践，margin失效了。Margin的auto原理是：通过father的宽度减去son的宽度，再自动分配两边的像素宽度。条件都符合为什么上面方法不行呢？原来，经过了absolute的设置，son元素的性质发生了变化：son元素变为了浮动元素，也就是说其宽度等于其内容的宽度而不再是原本设置好的宽高了（这种性质被叫做包裹性），son的宽度变为未知量了，所以auto无法再计算，margin失效。

  问题来了，那要怎么实现居中啊？请看下面一段代码。

#entirety｛

  Width:1000px;

  Height:560px;

  Position:absolute;

  Left:0px;

  Right:0px;

  Margin:auto;

｝

  有人会说了，小曦你在逗我么，刚刚还说的absolute中margin会失效的啊。

  告诉你，上面的代码运行之后是正确的。我个人的理解是这样的：

  entirety元素的父元素是body，entirety的绝对定位是左右两个0，也就是说它的内容是要横向铺满body的，但是！我们设置了宽度啊，entirety就那么宽，让它横向铺满它做不到啊。这时候，我们的margin出场了，你不是做不到么，我帮你啊。因为绝对定位的左右两个0（即左右横向撑满body），margin知道body的宽度；entirety的宽度在那摆着呢，margin可以轻松的计算出两边的留白从而实现居中。

  所以...嘿嘿，其实我也不知道这样理解对不对，不过代码确实是可以实现的。

  小小新人一枚，缔曦是也。欢迎各位大牛批评指正，不胜感激。