zoukankan      html  css  js  c++  java
  • 定位属性

    1,定位方式相关属性

          position取值:

                    1.static:默认,静态定位

                    2.relative:相对定位

                    3.absolute:绝对定位

                    4.fixed:固定定位

    2.与定位位置相关的属性

          top

          bottom

          left

          right

          已像素为单位的值

    3.堆叠顺序

          z-index:value

          值越大越靠近用户          

    4.static 

           页面中的默认定位方式,

    5.相对定位

            相对于当前元素本身出现的位置而实现的一种定位方式

               实现方式:position:relative 

               通过 top bottom left right 来实现位置移动

           使用场合:

               1.会进行位置的微妙的调整

               2.配合着绝对定位使用

    6.绝对定位

          特点:脱离文档流,不占据也页面空间

           定位位置:相当于【最近】的【已定位】的【祖先】元素

                     如果没有祖先元素进行定位,那它的位置就是body

           <nav>

               <div>

                     <p> </p>

               </div>

            </nav>

       已定位:非static,指的是telative ,absolute,fixed

       祖先元素p的祖先元素div,nav

        实现方式:position:absolutel

        top, bottom,left,right位置的偏移量,相对于最近的已定位的祖先元素去偏移

       使用场合:

         1.弹出菜单的位置

            所有的弹出的菜单都是据对定

        

    7,固定定位

        将元素固定在页面上的某一个位置,不随滚动条的滚动而发生变化

        语法:

              position:fixed;

              top,bottom,left,tight

          它永远相对于body定位。

       

  • 相关阅读:
    jenkins X实践系列(2) —— 基于jx的DevOps实践
    K8S集群安装
    google gcr.io、k8s.gcr.io 国内镜像
    使用.NET Core+Docker 开发微服务
    APM 原理与框架选型
    统一配置中心选型对比
    【开源小软件 】Bing每日壁纸 V1.2.1
    【开源小软件 】Bing每日壁纸 让桌面壁纸保持更新
    互联网企业级监控系统 OpenFalcon
    完整的房间类游戏解决方案AiJ
  • 原文地址:https://www.cnblogs.com/qulb/p/5896935.html
Copyright © 2011-2022 走看看