Positioning(定位)

Positioning(定位)

   定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

   元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作

   方式，这取决于定位方法.

四种定位方式

• Static 定位

         HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

• Fixed（固定） 定位

              固定定位相对于浏览器可视窗口进行定位。固定定位后自动变成行块元素;固定定位元素可以成为其后代绝对定位元素的

              定位参照物;固定定位的元素的位置不受浏览器滚动条的影响。
     

• Relative（相对） 定位

              a. 相对定位的参照物是元素没有发生定位前本应该出现的位置。

              b.元素相对定位后其原来位置仍要保留，其它元素不得占用。

             使用情况

                    1.元素想偏移。

                    2.元素要做为其绝对定位后代元素的参照物时。

• Absolute（绝对定位） 定位

               a.元素绝对定位后自动变成行块元素。

               b.绝对定位元素的父元素，计算宽高时将忽略绝对定位的子元素。

               c.绝对定位的元素往往要配合使用left /right/top/bottom进行位置设定。

               d.绝对定位的参照物是:离他最近的且设置了position值为relative/fixed/absolute之一的先祖元素，

                  如果没有这样的先祖元素 为参照物，那么参照物就是html。

               e.绝对定位的元素，高度宽度如果设为百分比，那么这个百分比是相对于其定位参照物的高度宽度，而非

                  其父元素.

               f.元素绝对定位后，设置left/right/top/bottom如果为百分比那么百分比是相对于其参照物的宽高来

                 计算的，而非自身的宽度。

               g.绝对定位的元素，会遮挡处于其后面的标准流元素的内容.

               h.可以通过z-index属性来控制定位元素与浮动元素在z轴方向上的叠加顺序, 但不能控制标准文档流元素.