静态地方,亿万先生:相对定位在实质上中行使效能更高、应用场景更普遍

前边的话

  前边早已介绍了稳定的偏移层叠,例子中山大学量的采纳了相对定位。因为相较于相对固化和固定定位,相对定位在实质上中应用功能更高、应用场景更广大。本文将介绍使用相对化定位时的切实细节

 

CSS 定位

  • CSS有两种为主的原则性机制:普通流,浮动,相对定位(absolute, fixed):
    • 普通流是私下认可定位格局,在平时代前卫桐月素框的职位由成分在html中的地点决定,那也是我们最广大的措施,个中position: static 与 position: relative 属于普通流的稳定情势
    • 转变定位机制
    • 纯属定位包蕴 absolute和 fixed

position: static(默认) | relative | absolute | fixed | sticky | inherit
// 应用于所有元素。无继承性
/*
static:
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)

relative:
生成相对定位的元素,相对于元素本身正常位置进行定位。
元素仍保持其未定位前的形状,它原本所占的空间仍保留。
常用于对其自身进行细微调整。
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置

absolute:
生成绝对定位的元素,元素框从文档流完全删除,相对于 static 定位以外的第一个祖先元素(offset parent)进行定位。
元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框

fixed:
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身(或者说是浏览器窗口)
常用于需要一直停留在窗口的元素

sticky:
CSS3新属性,兼容性较差,一般用JS实现。表现类似 position: relative 和 position: fixed 的合体,
在目标区域在屏幕中可见时,它的行为就像 position: relative; 
而当页面滚动超出目标区域时,它的表现就像 position: fixed,它会固定在目标位置

inherit:规定应该从父元素继承 position 属性的值。一般不使用
*/


// 三种定位机制使用了4个属性来描述定位元素各边相对于其包含块的偏移。这4个属性被称为偏移属性
top/right/bottom/left = <length> | <percentage> | auto(默认) | inherit
/*
应用于:定位元素(也就是 position 值不是 static 的元素)。无继承性

百分数:对于top和bottom,相对于包含块的 clientHeight;对于right和left,相对于包含块的 clientWidth

这些属性描述了距离包含块最近边的偏移。top描述了定位元素上外边界离其包含块的顶端有多远。如果top为正值,会把定位元素的上外边距边界下移,若为负值,则会把定位元素的上外边距移到其包含块的顶端之上。
类似地,left描述了定位元素的左外边距边界在其包含块左边界右边(正值)或左边(负值)有多远。如果是正值,会把定位元素的外边距边界移到包含块左边界右边,而负值则将其移到包含块左边界左边。
所以,正值会导致向内偏移,使边界朝着包含块的中心移动,而负值会导致向外偏移
偏移定位元素的外边距边界时,带来的影响是元素的所有一切(包含外边距、边框、内边距和内容)都会在定位的过程中移动

注意:
    定位元素的边界是指定位元素 margin 外侧的边界;包含块的包含区域是指包含块的 border 内侧的 padding + content 区域
    如果同时定义了 left 和 right 值,且 width 和 height 有值,那么 left 生效, right 无效,同样,同时定义了 top 和 bottom,top 生效。
*/

定义

  当成分相对定位时,会从文书档案流中全然除去。元素位置相对于近年的已稳定祖先成分,借使成分未有已定位的上代成分,那么它的职责绝对于开首包含块document,其边界依照偏移属性放置。成分定位年轻成一个块级框,而随便原来它在常规流中生成何连串型的框。定位成分不会注入其余因素的内容,反之亦然。

  [注意]一旦文档可滚动,相对定位元素会随着它滚动,因为成分最后会绝对白一骢常流的某1有些定位。

  //滚动滚动条时会发现,绝对定位元素会趁着其滚动,但一定定位不会

相对定位(absolute)

特性

  absolute和float都得以触发成分的BFC属性,且都有着包裹性和破坏性,所以对于一些选拔场景,那多个属性能够展开替换。关于float属性的详细消息移步至此

【1】包裹性

  成分相对定位后,会为其子孙成分建立二个带有块。且若该绝对定位成分不设置宽度,宽度由内容撑开。

  [注意]变更的涵盖块会延伸,进而包涵全数后代浮动成分,但绝对定位的蕴涵块并不会蕴藏后代的永恒成分,只是当作后裔定位成分的一定父级

【2】破坏性

  成分相对定位后,会脱离文书档案流,若父级不安装中度,则父级高度塌陷;若父级为行内成分,无别的内容,则父级宽度也将塌陷

  //父级成分有拾px的padding,且背景颜色为蛋桔红

【3】去浮动

  成分相对定位后,成分原来的扭转效果将失效

【肆】偏移性子

  假使选用top、right、bottom、left那5个偏移特性来叙述成分5个边的放置地点,那么成分的惊人和宽度将由这几个偏移隐含显著,成分将会拉伸

  使用偏移属性拉伸的相对化定位成分,其内部因素援助百分比width/height值。经常状态下,成分中度百分比要回溯作用,必要父级窗口的冲天值不是auto;可是假诺容器由相对定位拉伸形成,百分比中度值也是扶助的

定义
  • 相对固化能够看成特殊的普通流定位,元素地方是相对于它在普通流中地点发生变化,而相对定位使成分的地点与文书档案流无关,也不占用文书档案流空间,普通流中的成分布局仿佛相对定位成分不设有1样
  • 当成分相对定位时,会从文书档案流中全然除去。绝对定位的元素的职务是相对于距离近日的非static祖先成分地方决定的。假若元素未有已定位的祖先成分,那么她的岗位就相对于起先包蕴块html来恒定,其边界依照偏移属性放置。成分定位年轻成三个块级框,而不管原来它在常规流中生成何类别型的框。定位成分不会注入别的因素的内容,反之亦然
  • 因为相对定位与文书档案流毫无干系,所以相对定位的成分得以覆盖页面上的别样因素,能够由此z-index 属性控制叠放顺序,z-index 越高,成分地方越靠上
  • 小心:倘使文书档案可滚动,相对定位成分会随着它滚动,因为元素最后会相对黄浩然常流的某1有的定位

display

  当成分相对定位后,成分得以改变display属性,但各浏览器解析不1样

  【一】IE8+浏览器解析平常

  【2】firefox和safari浏览器唯有切换为display:none时才会重新渲染,别的值相互切换时不济

  【三】chrome浏览器切换来display:inline时渲染无效,其余值相互切换时渲染不荒谬

  【四】IE7-浏览器将相对定位的要素全体渲染为inline-block成分,唯有切换为display:none时才会另行渲染,别的值相互切换时不济

  [注意]赶尽杀绝IE7-浏览器相对定位成分渲染为inline-block成分的bug很简短,只供给在相对定位的成万分面套多个空的<div>即可

<div>
    <div style="position:absolute"></div>
</div>
宽度
  • 纯属定位宽度是裁减的,假使想撑满父容器,能够安装 width: 百分之百
  • 注意:当父容器里有 相对定位 的子成分时,子成分设置 width: 100%实际上指的是相对于父容器的 padding+content
    的增进率。当子元素是非相对定位的成分时,width: 百分之百 才是指子成分的
    content 等于父成分的 content宽度

clip

  相对定位或一定定位成分才能够使用clip属性。相对定位成分常协作clip属性达到成分隐藏的效能。有关clip属性的详细新闻移步至此

.hide{
    position:absolute;
    clip: rect(0,0,0,0);
}

 

特性
  • absolute 和
    float都得以触发成分的BFC属性,且都有着包裹性和破坏性,所以对于部分采纳场景,这一个性格能够开始展览替换
  • 包裹性
    • 要素相对定位后,会为其后裔成分建立2个涵盖块。且若该相对定位成分不安装宽度,宽度由内容撑开,也便是暗中同意宽度为剧情宽度
    • 小心:浮动的包蕴块会延长,进而包括全数后代浮动成分,但相对定位的含有块并不会含有后代的固化元素,只是当作后裔定位成分的确定地点父级
  • 破坏性
    • 要素相对定位后,会退出文书档案流,若父级不设置中度,则父级中度塌陷;若父级为行内成分,无任何内容,则父级宽度也将塌陷
  • 去浮动
    • 要素相对定位后,成分原来的生功能果将失效
  • 偏移特性
    • 假若选择top、right、bottom、left那五个偏移个性来叙述成分五个边的放置地方,那么成分的莫斯中国科学技术大学学和宽度将由这么些偏移隐含分明,成分将会拉伸
    • 行使偏移属性拉伸的相对定位成分,其内部因素匡助百分比
      width/height
      值。日常状态下,成分中度百分比要温故知新成效,必要父级窗口的冲天值不是
      auto;可是假使容器由相对定位拉伸形成,百分比中度值也是扶助的

静态地点

  当成分相对定位后,若该因素的格式化属性不产生变化,则该因素处于静态地点。至于相对定位成分格式化的连带内容移步至此。成分的静态地点是指成分在正规流中原本的职位,更稳妥的讲,顶端的静态地方是从包涵块的上边界到假想框的上海外国语大学地距边界之间的离开。假想框是一旦成分position属性为static时成分的第3个框。

  但对此居中对齐的行内成分来说,将成分设置为absolute或fixed会发生静态地方跳动难题。而relative或static则不会有此难点。那是因为元素暗中认可的居中对齐是因素的始末中线对应父级块级成分中线,而当成分相对定位或一定定位之后,定位成分右边界将与其父级块级成分的中线对齐。

display 解析
  • 当成分相对定位后,成分得以变动display属性,但各浏览器解析不一致
    • IE八+浏览器解析符合规律
    • firefox和safari浏览器唯有切换为display: none;时才会重复渲染,其余值相互切换时不济
    • chrome浏览器切换成display: inline;时渲染无效,其余值相互切换时渲染符合规律
    • IE7-浏览器将相对定位的成分全体渲染为inline-block要素,唯有切换为display: none;时才会重复渲染,其余值相互切换时不济
      • 化解IE7-浏览器相对定位成分渲染为inline-block要素的bug很简单,只供给在相对定位的要素外面套多个空的<div>即可

overflow

  当overflow在相对定位元素和其含有块之间时,相对定位成分不会被父级overflow属性剪裁。有关overflow失效化解情势移步至此

  能够行使相对定位元素的overflow属性失效达成按钮外置的功能

.box{
    width: 100px;
    height: 100px;
    overflow: auto;
}    
.in{
    width: 100%;
    display: inline-block;
    height: 200px;
    background-color: pink;
}
.close{
    position:absolute;
    margin: 0 0 0 -20px;
    font-size: 20px;
    line-height: 20px;
    border: 2px solid;
    border-radius: 50%;
    cursor:pointer;
}

<div class="box">
    <div class="in">测试内容</div><!--             
     -->&times;
</div>

 

clip
  • 相对定位或定点定位成分才得以应用clip属性。相对定位元素常协作clip属性达到元素隐藏的效应

.hide{
    position: absolute;
    clip: rect(0, 0, 0, 0);
}  
静态地点
  • 当成分相对定位后,若该因素的格式化属性不产生变化,则该因素处于静态地方
  • 要素的静态地方是指成分在健康流中原本的职位,更方便的讲,顶端的静态地点是从包涵块的下面界到假想框的上国财经高校地距边界之间的偏离。假想框是只要成分position
    属性 为static 时元素的第二个框
  • 但对此居中对齐的行内元素(个人:还包蕴行内块状成分)来说,将成分设置为
    absolute 或 fixed 会爆发静态地点跳动难点。而 relative 或 static
    则不会有此难题。那是因为成分默许的居中对齐是因素的剧情中线对应父级块级成分中线,而当元素相对定位或定点定位之后,定位元素左侧界将与其父级块级成分的中线对齐。除了居中对齐,左对齐、右对齐皆以接纳成分本身的左侧界去对齐

    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .box1 {
        width: 300px;
        height: 200px;
        margin: 20px;
        text-align: center;
        /*text-align: right;*/
        background-color: lightsalmon;
    }

    span {
        /*display: inline-block;*/
        position: absolute;
        background-color: lightblue;
    } 
    </style>
</head>
<body>
<div class="box1">
    居中行内元素
</div>
</body>
overflow
  • 当overflow在相对定位成分和其富含块之间时,相对定位元素不会被父级overflow属性剪裁
  • 譬如:能够使用绝对定位成分的overflow属性失效完结按钮外置的功能

    <style type="text/css">
    .box {
        /*position: relative;*/
        width: 200px;
        height: 200px;
        margin: 30px;
        overflow: hidden;
        background-color: pink;
    }

    .close {
        position: absolute;
        margin: -30px 0 0 185px;
        width: 20px;
        line-height: 20px;
        text-align: center;
        border: 2px solid;
        border-radius: 50%;
        cursor: pointer;
    }
    </style>
</head>
<body>
<div class="box">
    <div class="in">测试内容</div>           
    ×
</div>
</body>

纯属定位的选拔

自适应岗位的随从图标
  • 图标使用不依靠定位父级的absolute和margin属性进行定点,这样,当文本的字符个数改变时,图标的岗位能够自适应

    <style type="text/css">
    div {
        width: 500px;
        height: 20px;
        margin: 30px;
        line-height: 20px;
    } 

    i {
        position: absolute;
        width: 28px;
        height: 11px;
        margin: -6px 0 0 2px;
        background: url(http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/hot.gif);
    }
    </style>
</head>
<body>
<div>改变文字长度不影响<i></i></div>
</body>
录像图片上的小图标提醒
  • 相似在录像图片上的边角上都会有“自制”、“最新”、“拾80p”等如此的提醒。使用不借助的断然定位属性,可以让父级成分不设置relative,拓展性更强

    <style type="text/css">
    i {
        position: absolute;
        width: 50px;
        height: 18px;
        padding: 2px;
        text-align: center;
        line-height: 18px;
        font-style: normal;
        color: white;
        background-color: orange;   
    }    

    .box {
        height: 200px;
        width: 200px;
        margin: 50px;
        border: 2px solid gray;
    }

    .in {
        display: inline-block;
        width: 100%;
        height: 100%;
        line-height: 100px;
        background-color: pink;
    }

    .rt {
        margin-left: -54px;
    }

    .lb {
        margin-top: -22px;
    }

    .rb {
        margin-top: -22px;
        margin-left: -54px;
    }
    </style>
</head>
<body>
<div class="box">
    <i class="lt">自制</i>
    <div class="in">测试内容</div><i class="rt">独家</i>
    <i class="lb">1080p</i>
    <i class="rb">最新</i>
</div>
</body>
下拉菜单
  • 相似地,下拉菜单作为三个零部件必要运用在种种气象中,假若给组件添加
    relative属性,则下跌了其利用率

    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }  

    ul {
        list-style: none;
    }

    input {
        border: none;
    }

    .box {
        width: 250px;
        height: 35px;
        margin: 50px;
        border: 1px solid #ccc;
    }

    .box > .con {
        overflow: hidden;
        margin-bottom: 10px;
    }

    .con > .input {
        width: 215px;
        height: 35px;
    }

    .con > .search {
        float: right;
        width: 35px;
        height: 35px;
        background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') -2px -40px;
    }

    .box > .list {
        display: none;
        /* 这里absolut的作用是什么? 设置绝对定位,完全脱离文本流,也就不会影响到其它元素的布局 */
        position: absolute;
        width: 212px;
        overflow: hidden;
        border: 1px solid #ccc; 
        background-color: #fff;
    }

    .list > .in {
        line-height: 40px;
        text-indent: 1em;
        cursor: pointer;
    }

    .list > .in + .in {
        border-top: 1px solid lightblue;
    }

    .list > .in:hover {
        background-color: #f9f9f9;
    }
    </style>
</head>
<body>
<div class="box">
    <div class="con">
        <input class="input" id="input">
        <a href="#" class="search"></a>
    </div>
    <ul class="list" id="list">
        <li class="in">选项一</li>
        <li class="in">选项二</li>
        <li class="in">选项三</li>
    </ul>
    <div>其它文本内容其它文本内容其它文本内容其它文本内容</div>        
</div>
<script type="text/javascript">
input.onfocus = function(){
    list.style.display = 'block';
}

input.onblur = function(){
    list.style.display = 'none';
}
</script>
</body>
边缘对齐
  • 不少网址都施用了边缘对齐,但不少都以用页面宽度总计出来的,当宽度变化时索要再行总计。而无依靠的断然定位应用静态地方,无需计算就可将其岗位分明,且拓展性好

    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    ul {
        list-style: none;
    }

    .box {
        width: 300px;
        height: 200px;
        margin: 50px;
        border: 2px solid black;
        background-color: lightgreen;
    }

    .box > .out {
        text-align: right;
    }

    .out > .list {
        /* 未设置绝对定位前,元素右边界与其父级块级元素的右边界线对齐 */
        position: absolute;
        /* 定位元素左边界将与其父级块级元素的右边界线对齐 */
        /* 设置固定定位 osition: fixed; 也可以,但是可能会影响其它元素的布局 */

        display: inline-block;
        margin: 10px 0 0 2px;
    }

    .list > .in {
        text-align: center;
        width: 30px;
        line-height: 30px;
        margin-top: 10px;
        border-radius: 50%;
        background-color: pink;
    }
    </style>
</head>
<body>
<div class="box">
    <div class="out">
        <!-- 对于safari浏览器需要添加空格   来触发右对齐,其他浏览器则不需要-->
        <!--   -->
        <ul class="list">
            <li class="in">一</li>
            <li class="in">二</li>
            <li class="in">三</li>
        </ul>        
    </div>
</div>
</body>
星号
  • 在重重挂号或登录页面中,存在用 * 表示的必填项。* 和 *
    号对齐,文字和文字对齐。那种情景选取静态地方的相对定位比较适宜

    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    ul {
        list-style: none;
    }

    .list {
        width: 100px;
        padding-left: 20px;
        margin: 50px;
        border: 2px solid black;
        line-height: 2em;
    }

    .in > i {
        /* 设置绝对定位,完全脱离文档流, 中的文字自然也就左对齐了 */
        position: absolute;

        margin-left: -10px;
        color: red; 
        font-style: normal;
    }
    </style>
</head>
<body>
<ul class="list">
    <li class="in">
        <i>*</i>手机号
    </li>
    <li class="in">
        用户名
    </li>
    <li class="in">
        <i>*</i>密码
    </li>
</ul>
</body>
偏移属性
  • 当使用偏移属性时,相对定位成分将相对于含有块举行固定。1般地,大家无非使用偏移属性中的三个,且这多少个属性不冲突。但骨子里,对峙的偏移属性如left和right能够同时选取,甚至5个偏移属性都得以而且使用,并且能够达到一些奇怪的效果。以下基于相对定位偏移属性的利用
全屏自适应
  • 贯彻二个离开显示屏左侧200px的全屏自适应的容器层

    <style type="text/css">
    .box {
        position: absolute;
        top: 0;
        left: 0;
        right: 200px;
        bottom: 0;
        background-color: pink;
    }
    </style>
</head>
<body>
<div class="box"></div>
</body>
左右半区翻图
  • 一些选项卡中留存左右半区的翻图效果,点击左覆盖区切换来上一张图纸,点击右覆盖区切换成下一张图片

    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    ul {
        list-style: none;
    }

    .box {
        position: relative;
        width: 300px;
        height: 200px;
        overflow: hidden;
        margin: 50px;
        border: 2px solid lightgray;
        text-align: center;
        font: 40px/200px '宋体';
        color: white;
    }

    .box > .list{
        position: absolute;
        width: 400%;
        left: 0;
        top: 0;
        bottom: 0;
        transition: left 1s;
    }

    .list > .in{
        float: left;
        width: 25%;
        background-color: lightgreen;
    }

    .box > .l,
    .box > .r{
        position: absolute;
        opacity: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .box > .l {
        left: 0;
        right: 50%;
    }

    .box > .r {
        left: 50%;
        right: 0;
    }

    .box > .l:hover,
    .box > .r:hover{
        opacity: 1;
        transition: 1s;
    }
    </style>
</head>
<body>
<div class="box">
    <ul class="list" id="list">
        <li class="in">第1个</li>
        <li class="in">第2个</li>
        <li class="in">第3个</li>
        <li class="in">第4个</li>
    </ul>
    <div class="l" id="l"><</div>
    <div class="r" id="r">></div>
</div>
<script type="text/javascript">
var index = 0;
var children = list.children;
l.onclick = function(){
    if(index > 0){
        index--;
        move(index);
    }
}

r.onclick = function(){
    if(index < children.length - 1){
        index++;
        move(index);
    }
}

function move(index){
    list.style.left = '-' + index * 100 + '%';
}
</script>
</body>
九宫格
  • 应用相对定位的偏移属性能够创制宽高自适应的玖宫格效果

    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    ul {
        list-style: none;
    }    

    .list {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .list > .in {
        /* 这里设置:相对定位,因为下面使用了 伪元素,在 .in 的内容之前及之后插入了新内容 */
        position: relative;

        float: left;
        height: 33.3%;
        width: 33.3%;
        background-color: pink;
    }

    .list > .in:before {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        border-radius: 10px;
        background-color: lightblue;
    }

    .list > .in:after {
        content: attr(data-value);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: 30px;
        margin: auto;
        text-align: center;
        font:bold 24px/30px '宋体';
    }
    </style>
</head>
<body>
<ul class="list">
    <li class="in" data-value='1'></li>
    <li class="in" data-value='2'></li>
    <li class="in" data-value='3'></li>
    <li class="in" data-value='4'></li>
    <li class="in" data-value='5'></li>
    <li class="in" data-value='6'></li>
    <li class="in" data-value='7'></li>
    <li class="in" data-value='8'></li>
    <li class="in" data-value='9'></li>
</ul>
</body>

相对固定(relative)

定义
  • 当成分相对稳定时,它会从其健康地方移走,可是,原来所占的空中并不会由此未有。相对固定成分,会为其持有子成分建立一个新的包括块。那个蕴涵块对应于该因素原本所在的地方
  • 相对固定完结的经过首先是按static(float)方式变通一个要素(并且元素像层壹样变更了起来),然后相对于本人本来地方展开偏移,移动的方向和增长幅度由leftrighttopbottom性格明确,偏移前的职务保留不动
  • position: relative; 和 负margin
    都得以使元素位置发生偏移,二者有怎样界别?

    • position: relative;
      相对自个儿原来的地方偏移,不影响其余普通流兰月素的岗位
    • margin:除了让要素本身发生偏移还影响别的普通流中的要素

    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 600px;
        height: 300px;
        margin: 30px;
        background-color: pink;
    }

    .box > .box1 {
        position: relative;
        top: 50px;
        left: 100px;
        /* .box1 元素相对于以前的位置向右移动100px,向下移动50px */
        /* 虽然 .box1 元素相对于以前的位置产生了偏移,但是 .box1 元素以前的位置还是保留着,所以span元素实际显示的区域是在 .box1 元素以前位置的后面 */

        width: 100px;
        height: 100px;
        background-color: lightsalmon;
    }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">相对定位</div>
    你好世界你好世界你好世界你好世界你好世界你好世界
</div>
</body>
  • 注意:
    • 要素仍旧处在标准文书档案流中
    • 设若相对固定成分境遇过度受限的题材,3个值会重置为另三个值的相反数。bottom
      总是等于 -top,right 总是等于 -left
百分比
  • 充裕奇怪的是,尽管相对稳定的数值型偏移属性是相对于本身的,但其比例却是相对于含有块的。top
    和 bottom 百分比相对于含有块的中度(只是中度height,不包罗纵向
    padding 和 border),left 和 right
    百分比相对于含有块的宽度(只是宽度 width,不包括横向 padding 和
    border)
  • 小心:对于IE7-和firefox浏览器来说,若包括块的惊人 height 为
    auto,则百分比的 top 和 bottom 设置有效益,而其他浏览器则都尚未遵循

    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 400px;
        height: 400px;
        background-color: pink;
    }

    .box > .box1{
        position: relative;
        left: 40px;
        top: 40px;
        /* 数值型相对于自身 */

        width: 100px;
        height: 100px;
        background-color: lightsalmon;
    }

    .box > .box2{
        position: relative;
        left: 10%;  
        top: 10%;
        /* 百分比相对于包含块,这里移动 10% * 400 = 40px */

        width: 100px;
        height: 100px;
        background-color: lightblue;
    }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
亿万先生:,特性
  • 限制范围
    • 般地,给相对定位成分限制范围时,为其父级成分设置绝对固定relative,因为相对稳定成分不脱离文档流
    • 只顾:相对稳定成分得以限制绝对定位,但不可能限制固定定位,因为固定定位是相持于视窗定位的
  • 晋级层级
    • 当想要升高成分层级,又不想淡出文书档案流时,使用相对固化是一个好主意
行内元素
  • 区别于相对定位成分得以使成分具有块级成分属性,相对固定应用于 inline
    成分后,由于非常小概转移其行内成分的性格,不有所块级成分属性,无法设置宽高,其前后
    margin 也一如既往留存问题

    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }

    .box {
        width: 600px;
        height: 300px;
        margin: 30px;
        background-color: pink;
    }

    .box > .inline1 {
        position: absolute;
        width: 100px;
        height: 100px;
        margin: 100px 0 0 100px;
        background-color: lightsalmon;
    }

    .box > .inline2 {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 20px 0 0 20px;
        background-color: lightblue;
    }
    </style>
</head>
<body>
<div class="box">
    行内元素1
    行内元素2
</div>
</body>
IE兼容
  • 在IE六浏览器下,haslayout下的要素 负margin
    超出父成分的片段会被埋伏掉。这么些难点得以经过设置margin负值成分的
    position 属性值为 relative 来消除

永恒定位(fixed)

  • 一直定位是纯属定位的①种,成分会完全从文书档案流中去除,但平素成分的晃动是争论于视窗,可能说它的相对移动的坐标是视图(荧屏内的网页窗口)自身。由于视图本人是定点的,它不会随浏览器窗口的滚动条滚动而生成,除非大家在荧屏中活动浏览器窗口的显示器地点,或改变浏览器窗口的显得大小,因而一定定位的要素会一贯位于浏览器窗口内视图的某些地点,不会受文书档案流动影响,那与background-attachment: fixed;本性功效雷同
  • 只顾:IE7-浏览器不援助
特性
  • 定位定位与相对定位的诸多特征都接近,具有包裹性、破坏性及去变通的个性,关于各浏览器中
    display 属性的
    bug、clip属性的藏匿效能、静态地点跳动以及overflow失效的突显都一样,在此就不再赘言
全屏遮罩
  • 当页面内容超出页面容器大小出现滚动条时,此时使用 absolute
    全屏遮罩晤面世滚动条以外部分从没遮住的意况。因为根成分html的父级是document,document的中度和可视区域一样,也正是与视窗壹致,是不包含滚动条以外部分的
  • 那会儿,只好采取fixed固定定位来落到实处全屏遮罩效果

    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }

    .page {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: pink;
        z-index: -1;
    }    

    .test {
        width: 2000px;
        height: 200px;
        margin: 20px;
        background-color: lightblue;
    }
    </style>
</head>
<body>
<div class="page" id="page"></div>
<div class="test"></div>  
<button type="button">absolute</button>
<button type="button">fixed</button>

<script type="text/javascript">
// 分别点击两个按钮,并拖动横向滚动条查看效果
var btns = document.getElementsByTagName('button');

for(var i = 0; i < btns.length; i++){
    btns[i].onclick = function(){
        page.style.position = this.innerHTML;
        console.log('.page 当前的定位方式为 ' + this.innerHTML)
    }
}  
</script>
</body>

CSS定位中的堆叠 z-index

  • 对此有着定位,最终都免不了蒙受四个因素试图放在同样职位上的情形。显明,当中三个必须盖住另贰个。但,怎样控制哪个成分放在上层,那就引入了质量z-index
  • 参考:
    深刻明白CSS中的层叠上下文和层叠顺序
z-index 的作用
  • 选拔z-index,能够改变元素相互覆盖的逐条。那特性格的名字由坐标种类得来,个中从左向右是x轴,从上到下是y轴。从显示屏到用户是z轴。在那几个坐标系中,较高z-index值的因素
    比 较低z-index值的因素
    离用户更近,那会导致较高z-index值的要素覆盖任何因素,那也称为堆叠或叠放
  • z-index 仅在安装了position 非 static 属性的因素生效,且 z-index
    的值只可以在兄弟成分之间比较
  • 瞩目:z-index暗中认可值为 auto,不会创设层叠上下文。但为 0
    时则会树立层叠上下文

z-index: <integer> | auto(默认) | inherit
// 应用于:定位元素。无继承性
// z-index 应用于定位元素是CSS2的规范,到了CSS3标准,z-index 的应用范围扩大了不少
// 所有整数都可以作为 z-index 的值,包括负数。如果为元素指定一个负z-index值,会将其移到离读者更远的位置,会移到叠放栈的更低层
堆叠规则
  • 对此CSS二.一的话,页面成分的堆叠规则如下:

  • 原则性成分的堆叠规则:

    • 对此一贯元素(position不是static的成分)来说,不安装z-index或z-index相同时,前边成分覆盖前边成分
    • 对此处于相同堆叠上下文中的同壹层次的要一向说,暗中认可z-index较大值覆盖z-index较小值

    <style type="text/css">
    .clearfix:after {
        content: " ";
        display: table;
        clear: both;
    }

    .parent {
        border: 10px solid green;
        background-color: rgba(0, 255, 0, 0.5);
        /*overflow: hidden;*/
    }

    .parent > div{
        height: 80px;
    }

    .block {
        border: 1px solid green;
        color: white;
        background-color: pink
    }

    /*
    行内框与一个浮动元素重叠时,其边框、背景和内容都在该浮动元素之上显示
    块框与一个浮动元素重叠时,其边框和背景在该浮动元素之下显示,而内容在浮动元素之上显示
    */
    .float {
        float: left;
        font-weight: bolder;
        background-color: yellow
    }

    .inline {
        margin-left: -40px;
        background-color: lightcoral;
    }

    .position {
        position: relative;
        background-color: rgba(0, 0, 255, 0.8);
    }

    .positive-zindex {
        position: relative;
        z-index: 10;
        top: -10px;
        background-color: rgba(255, 0, 0, 0.8);
    }

    .negative-zindex {
        position: relative;
        z-index: -1;
        top: -20px;
        background-color: lightcoral;
    }
    </style>
</head>
<body>
<div class="parent">
    文字内容
    <div class="block">块状元素块状元素块状元素<br>块状元素块状元素块状元素<br>块状元素块状元素块状元素</div>
    <div class="float clearfix">浮动元素浮动元素浮动元素</div>
    行内元素行内元素行内元素
    <div class="position">定位元素定位元素定位元素</div>
    <div class="positive-zindex">正z-index正z-index正z-index</div>
    <div class="negative-zindex">负z-index负z-index负z-index</div>
</div>
</body>
堆叠上下文
  • 就算为3个要素内定了z-index值(不是auto),该成分会建立和谐的局地堆叠上下文。那象征,成分的拥有后代相对于该祖先元素都有其协调的叠放顺序
  • auto值指当前堆叠上下文中生成的栈层次与其父框的层系同样,这么些框不会树立新的有的叠放上下文。z-index: auto;z-index: 0;的值相当,但z-index: 0;会树立新的一对堆叠上下文
  • 要素不会叠放在其堆叠上下文(即定位父级z-index为数字值)的背景之下,但能够叠放在其内容之下;当成分未有处在堆叠上下文中,成分不会叠放在<body>要素的背景之下,但可以叠放在其情节之下

    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .box1 {
        position: relative;
        /*z-index: 0;*/
        width: 150px;
        height: 150px;
        padding: 10px;
        margin: 50px; 
        background-color: lightsalmon;
    }

    .box1 > .box2 {
        position: relative;
        z-index: -1;
        width: 100px;
        height: 100px;
        margin-top: -10px;
        background-color: lightblue;
    }

    .box3 {
        width: 200px;
        height: 200px;
        padding: 10px;
        margin: -100px 50px 0;
        background-color: lightgreen;
    }
    </style>
</head>
<body>
<div class="box1">
    <p>box1</p>
    <div class="box2">box2</div>
</div>
<div class="box3">box3</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div'),
    box1 = divs[0],
    box2 = divs[1],
    box3 = divs[2];
console.log(getComputedStyle(box1, false)['z-index']);  // 0
console.log(getComputedStyle(box2, false)['z-index']);  // -1
console.log(getComputedStyle(box3, false)['z-index']);  // auto
</script>
</body>
兼容
  • IE7-浏览器 z-index 的暗中认可值是 0
    • 一般地,定位成分的 z-index 的暗许值是
      auto,而IE7-浏览器定位成分的 z-index 的暗中同意值是
      0,贰者的区分是IE7-浏览器的固定成分会自动生成堆叠上下文
  • IE6-浏览器关于z-index的1个怪异bug
    • 当元素本身浮动且不是定位成分(position是static),成分父级是relative,则在IE陆-浏览器在无论该因素的父级的z-index怎么着设置都不起成效
    • 化解办法:
      • 要素去除浮动
      • 父级成分的相对固定改成相对定位
      • 要素添加position属性(static除却)
      • 如上八个办法任一方法都足以,其实便是在破坏bug创造的尺度
  • IE6-浏览器下select的z-index无效而遮挡div
    • IE六-浏览器下select成分(下拉列表)设置z-index无效,且默许会堆叠在div上
    • 消除办法:在IE陆-浏览器中,固然div不可能覆盖select,不过iframe能够覆盖select。所以能够安装三个与div宽高相同的iframe。让div覆盖iframe,iframe覆盖select,最后达到select被div覆盖的遵循

相关文章

网站地图xml地图