css position_ZenDei技術網路在線

css position

-Advertisement-

position position--設置定位方式，設置參照物 top,right,bottom,left,z-index--設置位置，必須配合position使用，如果一個元素不是一個定位元素，設置了這些屬性是不起效果的。上面這兩項結合就能定一個元素在瀏覽器中的位置 1. top/right/... ...

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

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

JSON字元串和js對象轉換

https://developer.mozilla.org/en US/docs/Web/JavaScript/Reference/Global_Objects/JSON js數據類型： js Object JSON.stringify(); JSON.parse(); ...
Kendo Grid editing 自定義驗證報錯提示

Kendo UI是一個強大的框架用於快速HTML5 UI開發。基於最新的HTML5、CSS3和JavaScript標準。 Kendo UI包含了開發現代JavaScript開發所需要的所有一切，包括：強大的數據源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控制項。今天開始就對項目里使 ...
Angular實現數據綁定，它實現原理是什麼？

簡單的來說，就是給每個需要綁定的元素加上$watcher，緩存下oldValue，然後定時遍歷所有的$watcher，比較newValue和oldValue，如果變化了就做更新的操作。 ...
HTML5實戰文摘第二章 HTML5用於創建表單的輸入小部件數據綁定以及數據驗證

HTML5表單在原有表單特性的基礎上增加了一些比較便捷的特性，使得我們實現一些常用的表單的小部件、輸入類型、輸入驗證不再那麼大費周章。上一篇文章提到了HTML5實現的幾種新的輸入類型，現在我們更加詳盡的瞭解HTML5的表單產生的新特性和功能。 1. 輸入類型和輸入屬性菜鳥教程上給出了HTML5新增 ...
CSS佈局之div交叉排布與底部對齊--flex實現

採用CSS的flex佈局可以很容易的實現特殊佈局，比如垂直居中，div底部對齊等。我遇到了一個交叉佈局的需求，然後用flex佈局很愉快的把它給解決了。 ...
jQuery學習筆記（四）：attr()與prop()的區別

這一節針對attr()與prop()之間的區別進行學習。先看看官方文檔是如何解釋兩者之間功能差異的： attr() Get the value of an attribute for the first element in the set of matched elements or set on ...
jQuery學習筆記（三）：選擇器總結

這一節詳細的總結jQuery選擇器。一、基礎選擇器二、基本過濾器基本選擇器獲取的元素集合，通過過濾器的篩選，使選擇更加精確。三、內容過濾器 jQery準備了內容過濾器用於對選擇的元素集合內容進行過濾。統一名稱：空元素：不包含任何後代元素或文本內容的元素，如<div></div> 非空元素 ...
AngularJS移動開發中的各種坑

捂臉，辛酸淚ing...... 本文主要涉及部分在移動設備上特有的問題。相對來說，Jquery側重DOM操作，AngularJS是以視圖模型和雙向綁定為核心的。 ...