CSS 定位 (Positioning) 實例

時間 2019-12-14
原文原文鏈接
CSS 定位和浮動CSS 爲定位和浮動提供了一些屬性，利用這些屬性，能夠創建列式佈局，將佈局的一部分與另外一部分重疊，還能夠完成多年來一般須要使用多個表格才能完成的任務。定位的基本思想很簡單，它容許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置。顯然，這個功能很是強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝於對其它方面的支持，對此不該感到奇怪。另外一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發展初期增長的一個功能爲基礎。浮動不徹底是定位，不過，它固然也不是正常流佈局。咱們會在後面的章節中明確浮動的含義。CSS 定位屬性CSS 定位屬性容許你對元素進行定位。屬性 描述position   把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。top    定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right  定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。left   定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。overflow   設置當元素的內容溢出其區域時發生的事情。clip   設置元素的形狀。元素被剪入這個形狀之中，而後顯示出來。vertical-align 設置元素的垂直對齊方式。z-index    設置元素的堆疊順序。############CSS position 屬性經過使用 position 屬性，咱們能夠選擇 4 種不一樣類型的定位，這會影響元素框生成的方式。position 屬性值的含義：static元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。relative元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。absolute元素框從文檔流徹底刪除，並相對於其包含塊定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。fixed元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。提示：相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。###########CSS 定位機制CSS 有三種基本的定位機制：普通流、浮動和絕對定位。###########1.定位：相對定位本例演示如何相對於一個元素的正常位置來對其定位。    <style type="text/css">        h2.pos_left{            position:relative;;            left:-20px;        }        h2.pos_right{            position:relative;            left:20px;        }    </style></head><body><h2>這個正常位置</h2><h2 class="pos_left"> 這個向左移動</h2><h2 class="pos_right">這個標題向右移動</h2><p>相對定位會按照元素的原始位置對該元素進行移動。</p><p>樣式"left:-20px" 從元素的原始左側位置減去 20像素。</p><p>樣式 "left:20px" 向元素的原始左側位置增長 20像素</p></body>2.定位：絕對定位本例演示如何使用絕對值來對元素進行定位    <style type="text/css">        h2.pos_abs{            position:absolute;            left:100px;            top:150px;        }    </style></head><body><h2 class="pos_abs">這是帶有絕對定位的標題</h2><p>經過絕對定位，元素能夠放置到頁面上的任何位置。下面的標題距離頁面左側100px,距離頁面頂部150px.</p></body>3.定位：固定定位本例演示如何相對於瀏覽器窗口來對元素進行定位。        p.one{            position:fixed;            left:5px;            top:5px;        }        p.two{            position:fixed;            top:30px;            right:5px;        }    </style></head><body><p class="one">一些文本</p><p class="two">更多的文本。</p></body>4.設置元素的形狀本例演示如何設置元素的形狀。此元素被剪裁到這個形狀內，並顯示出來。    <style type="text/css">        img{            position:absolute;            clip:rect(0px 50px 200px 0px)        }    </style></head><body><p>clip 屬性剪切了一副圖像：</p><p><img src="eg_smile.gif" src="eg_bookasp.gif" width="120" height="128"></p><br/><p><img src="eg_smile.gif" src="eg_smile.gif" width="120" height="128"></p></body>5.如何使用滾動條來顯示元素內溢出的內容本例演示當元素內容太大而超出規定區域時，如何設置溢出屬性來規定相應的動做。    <style type="text/css">        div{                        width:150px;            height:150px;            overflow:scroll;        }    </style></head><body><p>若是元素中的內容超出了給定的寬帶和高度屬性，overflow屬性能夠肯定是否顯示滾動條等行爲。</p><div>    這個屬性定義溢出元素。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。    所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。默認值是 visible。</div>6.如何隱藏溢出元素中溢出的內容本例演示在元素中的內容太大以致於沒法適應指定的區域時，如何設置 overflow 屬性來隱藏其內容。    <style type="text/css">        div{                        width:150px;            height:150px;            overflow:hidden;        }    </style></head><body><p>若是元素中的內容超出了給定的寬度和高度屬性，overflow 屬性能夠肯定是否顯示滾動條等行爲。</p><div>這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。    所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。默認值是 visible。</div>7.如何設置瀏覽器來自動地處理溢出本例演示如何設置瀏覽器來自動地處理溢出。        div{                        width:150px;            height:150px;            overflow:auto;   #####auto 自動處理        }    </style>8.垂直排列圖象本例演示如何在文本中垂直排列圖象。    <style type="text/css">        img.top{vertical-align:text-top}        img.bottom{vertical-align:text-bottom}    </style></head><body><p>    這是一副<img class="top" border="0" src="eg_smile.gif" /></p><p>    這是一幅<img class="bottom" border="0" src="eg_smile.gif" /></p>9.Z-indexZ-index可被用於將在一個元素放置於另外一元素以後。    <style type="text/css">        img.x{            position:absolute;            left:0px;            top:0px;            z-index:-1;        }    </style></head><body><h1>這是一個標題</h1><img class="x" src="eg_smile.gif" /><p>默認的z-index 是0.z-index-1 擁有更低的優先級。</p></body>10.Z-index上面的例子中的元素已經更改了Z-index。  ### z-inde 1 區別    <style type="text/css">        img.x{            position:absolute;            left:0px;            top:0px;            z-index:1;        }    </style></head><body><h1>這是一個標題</h1><img class="x" src="eg_smile.gif" /><p>默認的z-index 是0.z-index-1 擁有更低的優先級。</p></body>11.使用固定值設置圖像的上邊緣本例演示如何使用固定值設置圖像的上邊緣。    <style type="text/css">        img{            position:absolute;            top:0px;        }    </style></head><body><h1>This is a Heading</h1><img  class="normal" src="eg_smile.gif"/><p>一些文本。一些文本。</p></body>12.使用百分比設置圖像的上邊緣本例演示如何使用百分比值設置圖像的上邊緣。    <style type="text/css">        img{            position:absolute;            top:5%;        }    </style>13.使用像素值設置圖像的底部邊緣本例演示如何使用像素值設置圖像的底部邊緣。    <style type="text/css">        img{            position:absolute;            top:0px;        }    </style> 14.使用百分比設置圖像的底部邊緣本例演示如何使用百分比值設置圖像的底部邊緣。    <style type="text/css">        img{            position:absolute;            bottom:5%;        }    </style> 15使用固定值設置圖像的左邊緣本例演示如何使用固定值設置圖像的左邊緣。    <style type="text/css">        img{            position:absolute;            left:100px;        }    </style> 16.使用固定值設置圖像的右邊緣本例演示如何使用固定值設置圖像的右邊緣。    <style type="text/css">        img{            position:absolute;            right:0px;        }    </style>17.使用百分比設置圖像的右邊緣本例演示如何使用百分比值設置圖像的右邊緣。    <style type="text/css">        img{            position:absolute;            right:5%;        }    </style>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。