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

                

  • 相关阅读:
    AC自动机讲解超详细
    区间树Splay——[NOI2005]维护数列
    区间树Splay——[NOI2005]维护数列
    Trie学习总结
    微信小程序刮刮乐
    微信小程序获得高度
    微信小程序多video播放暂停问题
    vue中的问题思考
    vue的开发技巧
    微信小程序消息推送,前端操作
  • 原文地址:https://www.cnblogs.com/Onlywjy/p/6072103.html
Copyright © 2020-2023  润新知