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轴方向上的叠加顺序, 但不能控制标准文档流元素.

            

posted @ 2016-11-16 23:44  %hahahaha%  阅读(517)  评论(0编辑  收藏  举报