zoukankan      html  css  js  c++  java
  • CSS定位网页中的元素

    relative相对定位

    偏移设置:leftrighttopbottom 值单位:px

    元素的规律:

    相对定位元素的规律

      设置相对定位的盒子会相对它原来的位置通过指定偏移,到达新的位置。

      设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响

      设置相对定位的盒子原来的位置会被保留下来

     

    特性:

         相对于自己的初始位置来定位

         元素位置发生偏移后,他原来的位置会被保留下来

         层级提高,可以把标准文档流中的元素及浮动元素盖下边

    使用场景:

        相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量。

    absolute绝对定位

      使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。

      如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位

      绝对定位的元素从标准文档流中脱离,这意味着他们对其他元素的定位不会造成影响。

      元素位置发生偏移后,他原来的位置不会被保留下来

    特性:

      绝对定位是相对定位父级的位置来定位,如果没有设置定位父级,则相对浏览器窗口来定位。

      元素位置发生偏移后,原来的位置不会被保留

      层级提高,可以把标准文档流中的元素及浮动元素盖在下边

      设置绝对定位的元素脱离文档流

     

    使用场景:

        一般情况下,绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景。

     

    fixed属性值

    偏移设置:leftrighttopbottom  值单位:px

      类似绝对定位,不过区别在于定位的基准不是祖先元素,而是浏览器窗口

     

    z-index属性

    调整元素定位时重叠层的上下位置

      z-index属性值:整数,默认值为0

    设置了position属性时,z-index属性可以设置各元素之间的重叠高低关系

      z-index值大的层位于其值小的层上方

    网页元素透明度

    属性:

    opaction  filter

     opaction:x; x值[0 ,1],值越小越透明

     filter:alpha(opacity=x); x值[0 ,100],值越小越透明

  • 相关阅读:
    springcloud(九):熔断器Hystrix和Feign的应用案例
    springcloud(八):熔断器Hystrix
    springcloud(七): 使用Feign调用Eureka Server客户端服务
    springcloud(六):给Eureka Server服务器端添加用户认证
    springcloud(六):Eureka提供数据的客户端连接Docker的mysql
    Live Reload
    localStorage eval script
    javascript AOP
    如何设置让SFTP的用户限制在某个目录下
    整站下载器
  • 原文地址:https://www.cnblogs.com/cosmosray/p/7562278.html
Copyright © 2011-2022 走看看