zoukankan      html  css  js  c++  java
  • HTML_定位网页元素

    一.position属性

         意指:盒子的位置。

    四个属性:

    1.static:默认值,没有定位,元素按照标准文档流进行布局。

    2.relative:相对定位,使用相对定位的盒子位置以标准文档流进行的排办方式为基础,然后使盒子相对于他原本的位置偏移指定的距离。相对定位的盒子仍然在标准文档流中,其后的盒子仍以标准文档流当是对待它。

    3.absolute:绝对定位,盒子的位置以包含他的盒子为基准进行偏移。绝对定位的盒子从标准文档流中脱离。这意味着他们对其后的其他盒子的定位没有影响,对于其他的盒子来说就好像这个盒子不存在一样。

    4.fixed:固定定位,他和绝对定位类似,只是以浏览器窗口为基础进行定位,也就是说当拖动浏览器窗口的滚动条时,依然保持对象位置不变。

     例

    ……
    <div id="father">
      <div id="fir">第一个盒子</div>
      <div id="sec">第二个盒子</div>
      <div id="thi">第三个盒子</div>
    </div>
    ﹉﹉
    

      

    div{
     margin:10px;
    padding:5px;
    line-height:25px;
    }
    #father{
     border:1px solid;
     padding:0px;
    }
    #fir{
    nackground-color:#F2BB6F;
    border:1px dashed;
    }
    ……
    

      #设置相对定位元素的规律#

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

    2)设置相对定位的盒子扔在标准文档中,他对父级盒子和相近的盒子都没有任何影响。

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

              #绝对定位#

    1)使用绝对定位的元素以他最近的一个“已定位”的“祖先”元素为基准进行偏移。如果没有已定位的祖先元素,那么以浏览器为基准进行定位。

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

           ^O^相对定位的特性:

    1)相对定位自己的初始位置来定位。

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

    3)层次提高,可以把标准文档流的元素及浮动元素盖在下面。

            使用场景

    1)相对定位一般情况很少单独用,都是配合绝对定位使用,为绝对定位创造父级而不是位置偏移。

          ^O^绝对定位的特性:

    1)绝对定位相对他的定位父级的位置来定位的。

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

    3)层次提高,可以把标准文档流中的元素及浮动元素盖在下面。

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

             使用场景

    1)一般情况下,绝对定位用在下拉菜单,焦点图轮播,跳出数字泡,特别等场景

    二.z-index属性

    用来解决覆盖的元素他们上下位置

    z-index:(数字);

    两个属性:

    1.opacity:x    值为0~1

    2.filter:alpha  值为0~100

    由于浏览器的兼容,一般情况两个同时使用。

  • 相关阅读:
    为了实现一个函数 clone ,可以对 JavaScript 中 5 种主要的数据类型 (包括 Number、 St「ing 、 Object、 A「「ay、 Boolean )进行值(深)复制。
    说说你对语义化的理解
    vue 根据字符串的长度控制显示的字数超出显示省略号
    加密号码将中间四位改为*
    前端项目部署错误:npm ERR! notarget No matching version found for event-stream@3.3.6
    npm报错:A complete log of this run can be fund in:........
    nrm插件的安装插件和使用
    Vue过渡搭配Velocity.js动画的基本使用
    Asp.Net Core&钉钉开发系列
    KnockoutJS知识规整目录
  • 原文地址:https://www.cnblogs.com/huanghui-1243/p/7494568.html
Copyright © 2011-2022 走看看