相对定位的施用,因为相较于相对固定和固化定位

后边的话

  后面早已介绍了稳固的偏移层叠,例子中山大学量的选用了相对定位。因为相较于相对固化和固定定位,相对定位在实质上中应用效能更加高、应用项景越来越宽广。本文将介绍使用相对化定位时的生龙活虎细节

 

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,其边界依据偏移属性放置。元素定位年轻成一个块级框,而任由原本它在例行流中生成何体系型的框。定位成分不会注入其余因素的原委,反之亦然。

  [注意]万一文书档案可滚动,相对定位成分会趁着它滚动,因为成分最后会相对刘芳常流的某豆蔻年华局地定位。

  //滚动滚动条时会发觉,相对定位成分会趁着其滚动,但一贯定位不会

纯属定位(absolute卡塔 尔(阿拉伯语:قطر‎

特性

  absolute和float都得以触发成分的BFC属性,且都存有包裹性和破坏性,所以对于一些用出席景,那七个性子能够举行交替。有关float属性的详细新闻移步至此

【1】包裹性

  成分相对定位后,会为其后裔成分建构四个包括块。且若该相对定位成分不安装宽度,宽度由内容撑开。

  [注意]变动的蕴藏块会延长,进而包含全体后代浮动成分,但相对定位的盈盈块并不会蕴藏后代的定点成分,只是作为后裔定位成分的定位父级

【2】破坏性

  成分相对定位后,会脱离文档流,若父级不设置中度,则父级中度塌陷;若父级为行内成分,无别的剧情,则父级宽度也将塌陷

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

【3】去浮动

  成分绝对定位后,成分原本的转移效果将失效

【4】偏移性子

  若是利用top、right、bottom、left那4个偏移特性来叙述成分4个边的停放地点,那么元素的万丈和宽窄将由这一个偏移隐含显著,成分将会拉伸

  使用偏移属性拉伸的相对化定位成分,当中间因素接济百分比width/height值。平常状态下,成分中度百分比要数往知来功效,供给父级窗口的惊人值不是auto;然则假诺容器由相对定位拉伸变成,百分比中度值也是支撑的

定义
  • 对峙固定能够看做特殊的普通流定位,成分地点是相对于它在平时代时尚中地点发生变化,而相对定位使成分的任务与文书档案流非亲非故,也不占用文书档案流空间,普通流中的要素布局就如相对定位成分不设有雷同
  • 当成分相对定位时,会从文书档案流中完全除去。相对定位的要素的职责是相持于间距最近的非static祖先成分地点决定的。要是成分未有已稳固的祖宗成分,那么他之处就相对于最早包罗块html来定位,其边界依据偏移属性放置。成分定位年轻成多个块级框,而不管原来它在例行流中生成何种类型的框。定位成分不会注入别的因素的内容,反之亦然
  • 因为相对定位与文书档案流毫不相关,所以相对定位的成分得以覆盖页面上的别样因素,能够因此z-index 属性调节叠放顺序,z-index 越高,元素地方越靠上
  • 注意:纵然文书档案可滚动,相对定位成分会趁机它滚动,因为成分最后会相对方岚常流的某一片段定位

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>
宽度
  • 纯属定位宽度是减少的,若是想撑满父容器,能够安装 width: 百分之百
  • 只顾:当父容器里有 相对定位 的子成分时,子成分设置 width: 100%实际上指的是相持于父容器的 padding+content
    的肥瘦。当子成分是非相对定位的成分时,width: 百分之百 才是指子成分的
    content 等于父成分的 content宽度

clip

  相对定位或稳固定位成分才方可选择clip属性。相对定位成分常合营clip属性到达元素隐讳的效果。至于clip属性的详细音信移步至此

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

 

特性
  • absolute 和
    float都足以触发成分的BFC属性,且都装有包裹性和破坏性,所以对于部分接受场景,那七个天性能够举办沟通
  • 包裹性
    • 要素绝对定位后,会为其子孙成分创设二个包含块。且若该相对定位成分不安装宽度,宽度由内容撑开,也正是暗许宽度为剧情宽度
    • 小心:浮动的含有块会延长,进而包括全部后代浮动成分,但相对定位的隐含块并不会包括后代的牢固成分,只是作为后裔定位成分的一向父级
  • 破坏性
    • 要素相对定位后,会脱离文书档案流,若父级不设置中度,则父级中度塌陷;若父级为行内成分,无任何内容,则父级宽度也将塌陷
  • 去浮动
    • 要素相对定位后,成分原本的扭转效果将失效
  • 偏移天性
    • 设若使用top、right、bottom、left那4个偏移性情来说述元素4个边的停放地方,那么成分的惊人和幅度将由这几个偏移隐含显然,成分将会拉伸
    • 使用偏移属性拉伸的相对化定位成分,个中间因素支持百分比
      width/height
      值。日常情形下,成分中度百分比要回溯成效,要求父级窗口的万丈值不是
      auto;不过借使容器由绝对定位拉伸形成,百分比中度值也是支撑的

静态地点

  当成分绝对定位后,若该因素的格式化属性不发生变化,则该因素处于静态地方。有关相对定位成分格式化的连带内容移步至此。成分的静态地点是指成分在常规流中原来的职位,更方便的讲,最上部的静态地点是从包含块的下边界到假想框的上外省距边界之间的离开。假想框是只要成分position属性为static时元素的率先个框。

  但对此居中对齐的行内成分来讲,将元素设置为absolute或fixed会发生静态地点跳动难点。而relative或static则不会有此难点。那是因为成分私下认可的居中对齐是因素的开始和结果中线对应父级块级成分中线,而当成分绝对定位或一定定位之后,定位成分左侧界将与其父级块级成分的中线对齐。

display 解析
  • 当元素相对定位后,成分得以转移display属性,但各浏览器解析不同
    • IE8+浏览器深入剖析经常
    • 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>

相对定位的选择

自适应岗位的随从Logo
  • Logo使用不凭借定位父级的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>
录制图片上的小Logo提醒
  • 雷同在录制图片上的边角上都会有“自制”、“最新”、“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>
下拉菜单
  • 貌似地,下拉菜单作为二个构件需求采纳在各类境况中,即便给组件添加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>
偏移属性
  • 当使用偏移属性时,相对定位成分将相对于含有块进行牢固。通常地,大家独有使用偏移属性中的四个,且那多少个天性不相持。但骨子里,争持的偏移属性如left和right能够同有时候选择,以至4个偏移属性都能够并且使用,何况可以高达一些意料之外的功效。以下基于相对定位偏移属性的利用
全屏自适应
  • 完毕叁个相距显示屏侧边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卡塔 尔(英语:State of Qatar)

定义
  • 当成分相对固化时,它会从其符合规律职责移走,可是,原本所占的空中并不会为此未有。相对固化成分,会为其有着子成分创设贰个新的蕴含块。那么些带有块对应于该因素原来所在的职责
  • 周旋固化完毕的经过首先是按static(float卡塔 尔(英语:State of Qatar)方式转变五个因素(并且成分像层同样改造了四起卡塔尔,然后相对于本身本来地方伸开偏移,移动的主旋律和增长幅度由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
百分比
  • 特别奇怪的是,即便相对固定的数值型偏移属性是争执于自家的,但其比例却是相对于含有块的。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兼容
  • 在IE6浏览器下,haslayout下的成分 负margin
    超出父成分的一些会被隐形掉。这些主题素材能够通过安装margin负值成分的
    position 属性值为 relative 来化解

原则性定位(fixed卡塔 尔(英语:State of Qatar)

  • 定位定位是纯属定位的风姿罗曼蒂克种,成分会完全从文书档案流中去除,但牢固成分的摇曳是相持于视窗,大概说它的绝对移动的坐标是视图(显示器内的网页窗口卡塔 尔(英语:State of Qatar)本人。由于视图本人是一定的,它不会随浏览器窗口的滚动条滚动而生成,除非我们在显示屏中活动浏览器窗口的显示屏地方,或改造浏览器窗口的显得大小,由此一定定位的因素会一直位于浏览器窗口内视图的有些地点,不会受文书档案流动影响,这与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值,会将其移到离读者更远的位置,会移到叠放栈的更低层
聚积准绳
  • 对此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>
堆集上下文
  • 尽管为一个要素钦定了z-index值(不是auto卡塔 尔(英语:State of Qatar),该成分会构建协和的有个别积聚上下文。那表示,成分的具备后代绝对于该祖先元素都有其自个儿的叠放顺序
  • 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的叁个古怪bug
    • 当成分本人浮动且不是固定成分(position是static卡塔 尔(英语:State of Qatar),成分父级是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覆盖的效果与利益