css position

weixin_30729609
于 2016-11-17 20:14:00 发布
阅读量42
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/qq-757617012/p/6075314.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position</title>
    <style type="text/css">
    pre{ font-size: 22px; }
    b{ 
        font-size: 38px;
        font-family: "Microsoft Yahei";
     }
     .defaulttext{
         color: #666666;
         font-style: italic;
         font-weight: bold;

     }

    .sample0{
        border: 1px dashed red;
        width: 600px;
        height: 400px;
        position: relative;
        background-color: #1ffeee;
    }
    .sample0_child{
        position: absolute;
/*        width: 200px;
        height: 100px;*/
        background-color: red;

        bottom:  30px;
        right: 30px;
        top: 30px;
        left: 30px;
    }
    </style>
</head>
<body>
<pre>
    position--设置定位方式，设置参照物
    top,right,bottom,left,z-index--设置位置，必须配合position使用，如果一个元素不是一个定位元素，设置了这些属性是不起效果的。
    上面这两项结合就能定 一个元素在浏览器中的位置
</pre>
<br><br>
<pre><b>1. top/right/bottom/left 边缘与参照物边缘距离</b>： <span class="defaulttext">默认 top:0,left:0 </span>边缘和参照物边缘的位置， 可以是负值</pre><br>
<pre>如果不给子div设置宽高，只设置 position 和left top right bottom 这些边缘间距离值，那么子div 会被撑大</pre>
<div class="sample0">
    <div class="sample0_child">

    </div>
</div>


<br><br>

<style type="text/css">
.zparent{
    width: 700px;
    height: 380px;
    position: relative;
    border: 1px dashed #ff0000;
    font-family: "Microsoft Yahei";
    font-size: 40px;
}
.z01{
    text-align: center;
    line-height: 80px;
    position: absolute;
    background-color: blue;
    color: #ffffff;
    width: 300px;
    height: 150px;
    z-index: 1;
    top: 50px;
    left: 50px;
}
.z02{
    text-align: center;
    line-height: 80px;
    position: absolute;
    background-color: red;
    color: #ffffff;
    width: 300px;
    height: 150px;
    z-index: 2;
    top: 100px;
    left: 100px;
}
.z03{
    text-align: center;
    line-height: 150px;
    position: absolute;
    background-color: blue;
    color: #ffffff;
    width: 300px;
    height: 150px;
    z-index: 3;
    top: 150px;
    left: 150px;
}

</style>
<pre><b>2. z-index  Z轴</b>，<span class="defaulttext">    默认值 auto </span>适用于position 非static 元素</pre>
<div class="zparent">
    <div class="z01">z-index:1</div>
    <div class="z02">z-index:2</div>
    <div class="z03">z-index:3</div>
</div>
<br>

<pre>
默认情况下(没有设置z-index属性)，元素会按照文档流中出现的顺序，晚出现的盖在早出现的上面。
是不是z-index值越大的越好呢？不一定，因为z-index还有一个『z-index 栈』的概念</pre><br>
<style type="text/css">
.zparent_{
    position: relative;
    width: 400px;
    height: 200px;
    border:1px dashed red;
    margin-top: 10px;
    font-family: "Microsoft Yahei";
    font-size: 22px;
}
.zchild_{
    position: absolute;
    text-align: center;
    width: 200px;
    height: 100px;
    color: #ffffff;
    font-size: 22px;
    line-height: 100px;
    font-family: "Microsoft Yahei";
}

.zparent_1{
    z-index: 1;
    background-color: #baadbd;
}
.zchild_1{
    background-color: red;
    bottom: 10px;
    left: 100px;
    z-index: 1;
    
}
.zchild_3{
    background-color: gray;
    bottom: 70px;
    left: 120px;
    z-index: 2;

}


.zparent_2{
    z-index: -1;
    background-color: orange;
}

.zchild_2{
    background-color: #188ddd;
    top:-50px;
    left: 150px;
    z-index: 1;
}

</style>

<div class="zparent_ zparent_1 ">z-index: 1;
    <div class="zchild_ zchild_1">z-index: 1</div>
    <div class="zchild_ zchild_3"> z-index: 2</div>
</div>

<div class="zparent_ zparent_2">z-index: -1;
    <div class="zchild_ zchild_2 ">z-index : 1</div>
</div>
<br><br>


<pre><b>3. position 位置</b>：position: <span class="defaulttext">static</span>|relative|absolute|fixed </pre>
<br>

<pre><b>3.1 position:relative </b> 
仍在文档流中。 
相对定位元素的参照物是 元素本身。
可以改变元素在 Z 轴上的层级。
</pre>
<style type="text/css">
.relative{
    height: 100px;
    width: 200px;
    color: #ffffff;
    font-size: 22px;
    font-family: "Microsoft Yahei";
}

.relative_0{
    background-color: orange;
    bottom: -50px;
    left: 50px;
    position: relative;

}
.relative_1{
    background-color: #ff7b2e;
    top: 40px;
    left: 40px;
    position: relative;

}
.relative_2{
    background-color: orange;
}
</style>
<div class="relative relative_0">position: relative;</div>
<div class="relative relative_1">position: relative;</div>
<div class="relative relative_2"></div>

<br><br>

<pre><b>3.2 position:absolute </b> 
默认宽度为内容宽度。
脱离文档流。
参照物为第一个定位祖先/根元素。
</pre>
<style type="text/css">
.absolute_container{
    width: 400px;
    margin: 200px;
    line-height: 2;
    border: 1px dashed #aaa;
    position: relative;
}
.absolute_sample{
    background-color: pink;
    position: absolute;
    bottom: 10px;
    left: -30px;
}


</style>
<div class="absolute_container">
    <div>绝对定位元素的前序元素</div>
    <div class="absolute_sample">sample</div>
    <div>绝对定位元素的后序元素</div>
</div>

<br><br>

<pre><b>3.3 position:fixed </b> 
默认宽度为内容宽度。
脱离文档流。
参照物为视窗。
<style type="text/css">
.fixed_container{
    width: 600px;
    height: 500px;
    border: 1px dashed red;
    color: #ffffff;

}
.fixsample{
    background-color: orange;
    width: 400px;
    height: 100px;

}
.fixed_sample{
    position: fixed;
    bottom: 10px;
    left: 0;
    background-color: red;
}
</style>

<div class="fixed_container">
    <div class="fixsample">fixed元素的前序元素</div>
    <div class="fixsample fixed_sample">
    position:fixed;    
    bottom: 10px;
    left: 0;
    </div>
    <div class="fixsample ">fixed元素的后序元素</div>
</div>
</body>
</html>