静态地方,威尼斯人娱乐相对定位在实质上中采取功能更高、应用场景更常见

clip

  相对定位或稳定定位元素才可以使用clip属性。相对定位元素常合营clip属性达到元素隐藏的作用。至于clip属性的详细音信移步至此

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

 

边缘对齐
  • 洋洋网站都施用了边缘对齐,但为数不少都是用页面宽度总结出来的,当宽度变化时需求再度计算。而无依靠的相对定位应用静态地方,无需统计就可将其任务确定,且拓展性好

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

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>

 

自适应岗位的随从图标
  • 图标使用不依靠定位父级的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>

静态地方

  当元素绝对定位后,若该因素的格式化属性不发生变化,则该因素处于静态地方。有关相对定位元素格式化的连锁内容移步至此。元素的静态地方是指元素在例行流中原本的职位,更贴切的讲,顶端的静态地方是从包括块的上边界到假想框的上外地距边界之间的离开。假想框是一旦元素position属性为static时元素的率先个框。

  但对此居中对齐的行内元一直说,将元素设置为absolute或fixed会爆发静态地点跳动难点。而relative或static则不会有此难点。那是因为元素默许的居中对齐是因素的情节中线对应父级块级元素中线,而当元素相对定位或一定定位之后,定位元素右边界将与其父级块级元素的中线对齐。

宽度
  • 纯属定位宽度是裁减的,若是想撑满父容器,可以安装 width: 100%
  • 小心:当父容器里有 相对定位 的子元素时,子元素设置 width: 100%
    实际上指的是对峙于父容器的 padding+content
    的涨幅。当子元素是非相对定位的要素时,width: 100% 才是指子元素的
    content 等于父元素的 content宽度

特性

  absolute和float都可以触发元素的BFC属性,且都存有包裹性和破坏性,所以对于有些用参加景,那八个特性可以拓展轮换。至于float属性的详细新闻移步至此

【1】包裹性

  元素相对定位后,会为其后裔元素建立一个富含块。且若该绝对定位元素不安装宽度,宽度由内容撑开。

  [注意]变动的含有块会延伸,进而包括所有后代浮动元素,但相对定位的隐含块并不会蕴藏后代的定势元素,只是作为后裔定位元素的固定父级

【2】破坏性

  元素相对定位后,会脱离文档流,若父级不设置中度,则父级中度塌陷;若父级为行内元素,无其余内容,则父级宽度也将塌陷

  //父级元素有10px的padding,且背景颜色为天灰色

【3】去浮动

  元素相对定位后,元素原来的变更效果将失效

【4】偏移特性

  借使应用top、right、bottom、left那4个偏移特性来描述元素4个边的停放地方,那么元素的可观和增幅将由那几个偏移隐含确定,元素将会拉伸

  使用偏移属性拉伸的断然定位元素,其里面因素匡助百分比width/height值。常常情形下,元素中度百分比要温故知新功用,须求父级窗口的中度值不是auto;可是借使容器由绝对定位拉伸形成,百分比中度值也是永葆的

全屏遮罩
  • 当页面内容当先页面容器大小现身滚动条时,此时选择 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;不过假设容器由相对定位拉伸形成,百分比高度值也是永葆的

定义

  当元素相对定位时,会从文档流中完全除去。元素地点相对于近年来的已定位祖先元素,即使元素没有已稳定的先人元素,那么它的任务相对于开头包蕴块document,其边界根据偏移属性放置。元素定位年轻成一个块级框,而不论原来它在正常流中生成何连串型的框。定位元素不会注入其余因素的始末,反之亦然。

  [注意]设若文档可滚动,相对定位元素会趁着它滚动,因为元素最后会相对于正常流的某一局地定位。

  //滚动滚动条时会意识,相对定位元素会趁机其滚动,但原则性定位不会

CSS定位中的堆叠 z-index

  • 对于拥有定位,最终都难免遭受三个元素试图放在同样义务上的状态。分明,其中一个务必盖住另一个。但,如何决定哪个元素放在上层,那就引入了性能z-index
  • 参考:
    深入驾驭CSS中的层叠上下文和层叠顺序

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>
视频图片上的小图标提醒
  • 一般在视频图片上的边角上都会有“自制”、“最新”、“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>
定义
  • 相对固化可以看成特殊的普通流定位,元素地方是相持于它在日常流中地点发生变化,而相对定位使元素的地方与文档流无关,也不占用文档流空间,普通流中的因素布局如同相对定位元素不设有一样
  • 当元素绝对定位时,会从文档流中完全除去。绝对定位的元素的职分是对峙于距离方今的非static祖先元素地点决定的。如果元素没有已稳定的上代元素,那么他的地方就相对于开头包涵块html来稳定,其边界依照偏移属性放置。元素定位年轻成一个块级框,而无论是原来它在例行流中生成何种类型的框。定位元素不会注入其余因素的情节,反之亦然
  • 因为相对定位与文档流非亲非故,所以相对定位的元素得以覆盖页面上的其余因素,可以因此z-index 属性控制叠放顺序,z-index 越高,元素地方越靠上
  • 小心:若是文档可滚动,相对定位元素会趁机它滚动,因为元素最后会相对于正常流的某一局地定位
特性
  • 固化定位与相对定位的不在少数特征都类似,具有包裹性、破坏性及去变通的风味,关于各浏览器中
    display 属性的
    bug、clip属性的藏匿功效、静态地方跳动以及overflow失效的显现都同样,在此就不再赘言
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值,会将其移到离读者更远的位置,会移到叠放栈的更低层
兼容
  • 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覆盖的职能

原则性定位(fixed)

  • 定位定位是纯属定位的一种,元素会完全从文档流中去除,但一定元素的偏移是周旋于视窗,或者说它的相对移动的坐标是视图(显示屏内的网页窗口)本身。由于视图本身是一定的,它不会随浏览器窗口的滚动条滚动而生成,除非我们在屏幕中移动浏览器窗口的显示屏地点,或变更浏览器窗口的显得大小,因而一定定位的因素会始终放在浏览器窗口内视图的某部地点,不会受文档流动影响,这与background-attachment: fixed;属性作用雷同
  • 留神:IE7-浏览器不帮衬
定义
  • 当元素相对稳定时,它会从其健康职分移走,但是,原来所占的长空并不会因而没有。相对固定元素,会为其兼具子元素建立一个新的含有块。那几个包蕴块对应于该因素原本所在的地点
  • 相对固定完毕的进度首先是按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
左右半区翻图
  • 一对选项卡中存在左右半区的翻图效果,点击左覆盖区切换来上一张图纸,点击右覆盖区切换来下一张图纸

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

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 生效。
*/
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>

对峙固化(relative)

偏移属性
  • 当使用偏移属性时,相对定位元素将相对于含有块进行一定。一般地,大家唯有使用偏移属性中的三个,且这多个特性不对峙。但实际,相持的偏移属性如left和right可以而且使用,甚至4个偏移属性都足以同时利用,并且可以达标一些出人意表的法力。以下基于绝对定位偏移属性的拔取
堆叠规则
  • 对此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>
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>
特性
  • 限定范围
    • 般地,给相对定位元素限制范围时,为其父级元素设置相对稳定relative,因为相对稳定元素不脱离文档流
    • 留意:相对固化元素得以界定相对定位,但不可以限制固定定位,因为固定定位是周旋于视窗定位的
  • 提高层级
    • 当想要提高元素层级,又不想淡出文档流时,使用相对固定是一个好主意
百分比
  • 不行奇怪的是,就算相对固化的数值型偏移属性是相持于自己的,但其比重却是绝对于含有块的。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>

相对定位的施用

九宫格
  • 动用相对定位的偏移属性可以打造宽高自适应的九宫格效果

    <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>
堆叠上下文
  • 借使为一个要素指定了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>
行内元素
  • 不一致于相对定位元素得以使元素具有块级元素属性,相对固定应用于 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>
display 解析
  • 当元素相对定位后,元素得以变更display属性,但各浏览器解析分歧
    • IE8+浏览器解析正常
    • firefox和safari浏览器只有切换为display: none;时才会再一次渲染,其余值相互切换时不济
    • chrome浏览器切换来display: inline;时渲染无效,其余值互相切换时渲染正常
    • IE7-浏览器将相对定位的要素全体渲染为inline-block要素,只有切换为display: none;时才会另行渲染,其余值互相切换时不济
      • 杀鸡取卵IE7-浏览器绝对定位元素渲染为inline-block要素的bug很简短,只要求在相对定位的元素外面套一个空的<div>即可
下拉菜单
  • 貌似地,下拉菜单作为一个零件必要动用在各样处境中,假设给组件添加
    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>
IE兼容
  • 在IE6浏览器下,haslayout下的因素 负margin
    超出父元素的局地会被隐形掉。那几个题目可以通过安装margin负值元素的
    position 属性值为 relative 来缓解

纯属定位(absolute)

星号
  • 在许多注册或登录页面中,存在用 * 表示的必填项。* 和 *
    号对齐,文字和文字对齐。那种气象选择静态地点的相对化定位比较方便

    <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>
全屏自适应
  • 落到实处一个偏离显示器左侧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>

相关文章