深深掌握CSS相对定位absolute

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>

 

九宫格
  • 应用相对定位的偏移属性能够制作宽高自适应的九宫格效果

    <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>

前方的话

  前边早已介绍了定位的偏移层叠,例子中山大学量的采取了相对定位。因为相较于相对固化和一贯定位,相对定位在实质上中央银行使效能越来越高、应用场景更广阔。本文将介绍使用相对化定位时的活龙活现细节

 

反正半区翻图
  • 某些选项卡中设有左右半区的翻图效果,点击左覆盖区切换成上一张图纸,点击右覆盖区切换来下一张图片

    <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>

display

  当成分相对定位后,元素得以改正display属性,但各浏览器拆解分析不等同

  【1】IE8+浏览器剖析正常

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

  【3】chrome浏览器切换成display:inline时渲染无效,其余值彼此切换时渲染寻常

  【4】IE7-浏览器将相对定位的因素全体渲染为inline-block成分,独有切换为display:none时才会再度渲染,别的值相互切换时不济

  [注意]缓和IE7-浏览器相对定位成分渲染为inline-block元素的bug很简单,只需求在相对定位的要素外面套八个空的<div>就可以

<div>
    <div style="position:absolute"></div>
</div>
clip
  • 纯属定位或定点定位成分才足以利用clip属性。相对定位成分常合营clip属性到达元素隐讳的效应

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

clip

  相对定位或稳固定位成分才方可选择clip属性。相对定位成分常合营clip属性达到成分隐敝的功效。至于clip属性的详细消息移步至此

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

 

百分比
  • 这一个奇异的是,尽管相对固化的数值型偏移属性是相对于自己的,但其比例却是相对于含有块的。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>

静态地点

  当成分相对定位后,若该因素的格式化属性不产生变化,则该因素处于静态地方。关于相对定位成分格式化的相干内容移步至此。成分的静态地点是指成分在健康流中原来的职位,更贴切的讲,顶部的静态地方是从包括块的下边界到假想框的上国地质高校地距边界之间的离开。假想框是生龙活虎旦成分position属性为static时成分的首先个框。

  但对此居中对齐的行内成分来讲,将成分设置为absolute或fixed会产生静态地点跳动难点。而relative或static则不会有此难点。那是因为成分暗中认可的居中对齐是因素的剧情中线对应父级块级成分中线,而当成分相对定位或定点定位之后,定位成分左侧界将与其父级块级元素的中线对齐。

定义
  • 相持固定能够作为特殊的普通流定位,成分地点是对立于它在平凡流中地方发生变化,而相对定位使成分的职位与文书档案流非亲非故,也不占用文书档案流空间,普通流中的要素布局就如绝对定位成分不真实相通
  • 当成分相对定位时,会从文书档案流中全然除去。相对定位的成分的职位是相对于间隔近期的非static祖先成分地点决定的。假如成分未有已定位的古人元素,那么她的岗位就相对于初阶富含块html来恒定,其边界依照偏移属性放置。元素定位年轻成二个块级框,而任由原本它在健康流中生成何类别型的框。定位成分不会注入别的因素的剧情,反之亦然
  • 因为相对定位与文书档案流非亲非故,所以相对定位的要素得以覆盖页面上的其它因素,能够经过
    z-index 属性调控叠放顺序,z-index 越高,成分位置越靠上
  • 潜心:假使文书档案可滚动,相对定位成分会随着它滚动,因为元素最后会相对王宛平常流的某大器晚成有些定位

定义

  当成分相对定位时,会从文书档案流中全然除去。成分地方相对于如今的已定位祖先成分,要是成分未有已牢固的祖辈成分,那么它的岗位相对于伊始包括块document,其边界依据偏移属性放置。成分定位年轻成一个块级框,而不管原本它在例行流中生成何体系型的框。定位成分不会注入别的因素的从头到尾的经过,反之亦然。

  [注意]只要文书档案可滚动,相对定位成分会趁着它滚动,因为元素最后会相对徐婧常流的某一片段定位。

  //滚动滚动条时会发觉,相对定位成分会趁机其滚动,但稳住定位不会

摄像图片上的小图标提醒
  • 诚如在录制图片上的边角上都会有“自制”、“最新”、“1080p”等那样的升迁。使用不注重的相对定位属性,能够让父级成分不安装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>

特性

  absolute和float都得以触发成分的BFC属性,且都负有包裹性和破坏性,所以对于一些运用场景,那多个属性能够开展轮换。关于float属性的详细音信移步至此

【1】包裹性

  成分相对定位后,会为其后代成分构造建设一个包涵块。且若该相对定位成分不设置宽度,宽度由内容撑开。

  [注意]转换的含有块会延长,进而富含全部后代浮动成分,但相对定位的蕴藏块并不会包蕴后代的固化成分,只是作为后裔定位成分的定点父级

【2】破坏性

  成分相对定位后,会退出文书档案流,若父级不安装高度,则父级中度塌陷;若父级为行内成分,无此外剧情,则父级宽度也将塌陷

  //父级成分有10px的padding,且背景颜色为青蓝色

【3】去浮动

  成分相对定位后,成分原本的变通效果将失效

【4】偏移个性

  假设利用top、right、bottom、left那4个偏移特性来陈说成分4个边的停放地点,那么成分的冲天和增长幅度将由那几个偏移隐含分明,成分将会拉伸

  使用偏移属性拉伸的相对化定位成分,其内部因素辅助百分比width/height值。日常意况下,成分高度百分比要温故知新效用,须要父级窗口的莫斯中国科学技术大学学值不是auto;可是豆蔻梢头旦容器由相对定位拉伸产生,百分比高度值也是扶植的

兼容
  • IE7-浏览器 z-index 的暗中同意值是 0
    • 貌似地,定位元素的 z-index 的暗许值是
      auto,而IE7-浏览器定位成分的 z-index 的默许值是
      0,二者的界别是IE7-浏览器的定势成分会自动生成堆集上下文
  • IE6-浏览器关于z-index的三个古怪bug
    • 当成分本人浮动且不是定点成分(position是static),成分父级是relative,则在IE6-浏览器在无论该因素的父级的z-index怎么着设置都不起效能
    • 解除办法:
      • 要素去除浮动
      • 父级成分的相对牢固改成相对定位
      • 要素加多position属性(static除此之外)
      • 如上多少个主意任一方法都得以,其实正是在破坏bug创立的规范
  • IE6-浏览器下select的z-index无效而遮挡div
    • IE6-浏览器下select成分(下拉列表)设置z-index无效,且暗中认可会积聚在div上
    • 消除办法:在IE6-浏览器中,就算div不能覆盖select,不过iframe能够覆盖select。所以能够设置贰个与div宽高相符的iframe。让div覆盖iframe,iframe覆盖select,最后达到select被div覆盖的功用
行内成分
  • 不相同于相对定位成分得以使成分具备块级成分属性,绝对稳固应用于 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兼容
  • 在IE6浏览器下,haslayout下的因素 负margin
    超过父元素的有的会被埋伏掉。这一个标题得以由此设置margin负值成分的
    position 属性值为 relative 来清除

牢固定位(fixed)

  • 固化定位是相对定位的黄金年代种,成分会完全从文书档案流中去除,但稳住成分的偏移是相对于视窗,恐怕说它的相对移动的坐标是视图(显示器内的网页窗口)本人。由于视图自己是一贯的,它不会随浏览器窗口的滚动条滚动而转变,除非大家在显示屏中移动浏览器窗口的显示器地点,或转移浏览器窗口的体现大小,由此一定定位的成分会一向位于浏览器窗口内视图的某部地点,不会受文书档案流动影响,那与background-attachment: fixed;质量功效周边
  • 在乎:IE7-浏览器不扶助
自适应岗位的随行Logo
  • Logo使用不依靠于定位父级的absolute和margin属性实行定位,这样,当文本的字符个数改变时,Logo的职位能够自适应

    <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>

相持固定(relative)

宽度
  • 绝对定位宽度是减弱的,假若想撑满父容器,能够设置 width: 百分百
  • 小心:当父容器里有 绝对定位 的子成分时,子元素设置 width: 百分百实际上指的是周旋于父容器的 padding+content
    的幅度。当子成分是非相对定位的元素时,width: 百分之百 才是指子成分的
    content 等于父成分的 content宽度

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 生效。
*/
静态地方
  • 当成分相对定位后,若该因素的格式化属性不爆发变化,则该因素处于静态地方
  • 要素的静态地点是指成分在健康流中原来的职分,更贴切的讲,顶部的静态地方是从包涵块的上面界到假想框的上外国国语大学地距边界之间的离开。假想框是后生可畏旦成分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>

纯属定位(absolute)

定义
  • 当成分相对固准时,它会从其经常地点移走,不过,原本所占的空间并不会为此没有。相对固化成分,会为其抱有子成分建立二个新的带有块。那些带有块对应于该因素原本所在的职位
  • 相对固化实现的长河首先是按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>
  • 注意:
    • 要素依旧处在标准文书档案流中
    • 固然相对固化成分蒙受过度受限的主题材料,叁个值会重新恢复设置为另贰个值的相反数。bottom
      总是等于 -top,right 总是等于 -left
全屏自适应
  • 实现贰个相距荧屏侧边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 {
        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>
全屏遮罩
  • 当页面内容抢先页面容器大小现身滚动条时,那个时候使用 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>
特性
  • absolute 和
    float都足以触发成分的BFC属性,且都享有包裹性和破坏性,所以对于部分行使场景,那三个属性能够实行沟通
  • 包裹性
    • 要素相对定位后,会为其后代成分创立四个包括块。且若该相对定位成分不安装宽度,宽度由内容撑开,约等于暗中同意宽度为剧情宽度
    • 小心:浮动的包涵块会延长,进而满含全体后代浮动成分,但相对定位的包蕴块并不会含有后代的一向成分,只是作为后裔定位成分的原则性父级
  • 破坏性
    • 要素相对定位后,会脱离文书档案流,若父级不安装中度,则父级中度塌陷;若父级为行内成分,无其余内容,则父级宽度也将塌陷
  • 去浮动
    • 要素相对定位后,成分原本的变动作效果果将失效
  • 偏移天性
    • 生机勃勃经运用top、right、bottom、left那4个偏移特性来描述成分4个边的放置地方,那么成分的中度和幅度将由这一个偏移隐含分明,成分将会拉伸
    • 使用偏移属性拉伸的相对定位成分,其里面因素协理百分比
      width/height
      值。平时景况下,成分中度百分比要数往知来效能,要求父级窗口的可观值不是
      auto;可是只要容器由相对定位拉伸产生,百分比中度值也是永葆的
特性
  • 固定定位与相对定位的广大表征都好像,具备包裹性、破坏性及去变通的风味,关于各浏览器中
    display 属性的
    bug、clip属性的隐身功用、静态地点跳动以至overflow失效的变现都风姿洒脱律,在这里就不再赘述
星号
  • 在众多挂号或登陆页面中,存在用 * 表示的必填项。* 和 *
    号对齐,文字和文字对齐。这种景况接受静态地点的相对定位比较适当

    <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>
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定位中的堆积 z-index

  • 对此全数定位,最后都难免遭遇八个成分试图放在相仿任务上的意况。显著,当中多个必要盖住另二个。但,怎样决定哪个成分放在上层,那就引进了品质z-index
  • 参考:
    深远通晓CSS中的层叠上下文和层叠顺序
聚成堆法则
  • 对于CSS2.1来讲,页面成分的积聚法则如下:

  • 定位成分的积聚法则:

    • 对于固定成分(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>
偏移属性
  • 当使用偏移属性时,相对定位元素将绝对于含有块实行确定地点。平常地,大家只是使用偏移属性中的五个,且那四个属性不周旋。但实在,争持的偏移属性如left和right能够同期选用,以至4个偏移属性都得以並且使用,並且能够达到规定的标准一些意外的意义。以下基于相对定位偏移属性的运用
堆集上下文
  • 假使为二个成分钦命了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>
特性
  • 范围范围
    • 般地,给相对定位元凉秋制范围时,为其父级成分设置相对固化relative,因为相对固化成分不脱离文书档案流
    • 留意:相对固定成分得以界定绝对定位,但不能够限定固定定位,因为固定定位是相对于视窗定位的
  • 进级层级
    • 当想要提高成分层级,又不想淡出文书档案流时,使用相对固化是叁个好主意

纯属定位的运用

下拉菜单
  • 貌似地,下拉菜单作为贰个组件需求动用在各样情形中,要是给组件增加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>
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>
display 解析
  • 当成分相对定位后,成分得以纠正display属性,但各浏览器解析不一致样
    • IE8+浏览器拆解解析不奇怪
    • firefox和safari浏览器独有切换为display: none;时才会重复渲染,别的值相互切换时不济
    • chrome浏览器切换来display: inline;时渲染无效,别的值互相切换时渲染常常
    • IE7-浏览器将相对定位的元素全体渲染为inline-block要素,独有切换为display: none;时才会再也渲染,其余值互相切换时不济
      • 斩尽杀绝IE7-浏览器相对定位成分渲染为inline-block要素的bug很简短,只须求在相对定位的成非常面套三个空的<div>即可