• 定位网页元素


    一.定位网页元素

    position :

          1.static :默认值,代表没有定位,元素没有定位会以标准文档流方式展现出来

          2.relative :相对定位,元素以自身原来位置进行定位(如果设置元素浮动,那么会以浮动后的位置作为原来的位置)

     规律
            设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置
            设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响
            设置相对定位的盒子原来的位置会被保留下来

         3.absolute :绝对定位,元素以离他最近的已经定位的祖先元素进行定位,如果没有祖先元素定位,那么会以浏览器窗口进行定位

     规律:     使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
                     如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位
                     绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响
                     元素位置发生偏移后,它原来的位置不会被保留下来
    4.fixed :基于浏览器窗口进行定位,不会随着滚动条的移动而改变位置

      规律:    相对浏览器窗口来定位
                     偏移量不会随滚动条的移动而移动


    元素偏移方向
            如果想让元素向上移动,那么top属性写负值,或者bottom属性写正值
            如果想让元素向下移动,那么bottom属性写负值,或者top属性写正值
            如果想让元素向左移动,那么left属性写负值,或者right属性写正值
            如果想让元素向右移动,那么right属性写负值,或者left属性写正值
    二.设置定位元素的层叠

        z-index:默认为0 值越大层级越上
        opacity :0-1 值越小越透明
        filter:alpha(opacity=x):0-100 值越小越透明

  • 相关阅读:
    程序猿初出茅庐之一:学习方法
    Winform实现鼠标可穿透的窗体镂空效果
    HashMap源码分析(上)
    Java Integer常量池——IntegerCache内部类
    find the Nth highest salary(寻找第N高薪水)
    分布式理论:深入浅出Paxos算法
    smash:一个类unix内核
    【官网翻译】如何在VSCode中使用代码片段功能(snippets)?
    JavaScript与魔数检测
    给你一个团队,你能怎么管-读后感-凝聚力和执行力(1)
  • 原文地址:https://www.cnblogs.com/liuying23/p/9933593.html
Copyright © 2020-2023  润新知