浪費了“黃金五年”的Java程式設計師，還有救嗎？ >>>   

position 型別

• 普通定位:定位，系統預設的定位方式
• 相對定位：relative: 元素相對原來的位置的偏移位置，原來的空間任保留
• 絕對定位：abslute: 元素相對其包含塊的定位(父級為基準(父級元素必須是相對定位如果不是則一直往上找，直到找到body為止)來進行偏移)
• 固定定位：fixed: 相對於視窗的絕對定位

CCSS樣式

 div{
    width: 50px;
          height: 50px;
      }       
.div01{
       position: static; /**普通定位*/
       background-color: yellow;
   }
  .div02{
      position: relative; /**相對定位*/
      background-color: blue;
      width: 150px;
      height: 150px;
      left: 50px;  /**相對於原來的位置向右偏移50px*/
  }
 .div03{
     position: absolute; /**絕對定位*/
     background-color: red;
     left: 50px; /**相對於父級相對元素偏移50px，如果沒有父級相對定位元素則預設body*/
 }
 .div04{/**固定定位會脫離文件流，其他空白位置都可以填寫資訊*/
      position: fixed; /**固定定位*/
      background-color: green;
      right: 50px; /**距離視窗右邊偏移50px*/
  }
            
.div05{/**遮罩層：z-index垂直螢幕的方向設定，類似ps的圖層疊加原理*/
        position: absolute; 
        background-color: pink;
        left: 0px;
        top: 0px;  /**如果不設定則按照預設的位置顯示*/
        width: 100%; /***100%:標識遮罩層覆蓋整個瀏覽器視窗*/
        height: 100%;
        opacity: 0.5;  /**透明度*/
        z-index: 999;  /**Z軸座標：值遇到標識越貼近使用者*/
    }
 

介面

<div class="div01">靜態定位</div>
<div class="div02">我是相對定位
    <div class="div03">我是絕對定位</div>
</div>
<div class="div04">固定定位</div>


<br />
<p><input type="button" value="顯示遮罩層"></p>

<br/><br/>
<div style="display: none;" class="div05">
    Hello Python World!
</div>
 

Javascript操作程式碼：

$("input[type=button]").click(function(){
    console.log($(".div05").is(":visible"));
     $(".div05").toggle(function(){
         $(".div05").show();
     });
 });

效果：

相關推薦