zoukankan      html  css  js  c++  java
  • css position

    <!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;
    /*         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>
  • 相关阅读:
    设计模式-中介者模式
    设计模式-中介者模式
    设计模式-职责链模式
    设计模式-职责链模式
    设计模式-命令模式
    设计模式-命令模式
    设计模式-桥接模式
    模乘逆元与孙子定理
    网贷野蛮生长加速 超百亿平台频频涌现
    获乐视千万投资 电桩“傍上大款”
  • 原文地址:https://www.cnblogs.com/qq-757617012/p/6075314.html
Copyright © 2011-2022 走看看