CSS屬性匯總–(6) 定位屬性3
- 2020 年 1 月 14 日
- 筆記
10.right
right 屬性規定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
注釋：如果 "position" 屬性的值為 "static"，那麼設置 "right" 屬性不會產生任何效果。
對於 static 元素，為 auto；對於長度值，則為相應的絕對長度；對於百分比數值，為指定值；否則為 auto。
對於相對定義元素，left 的計算值始終等於 right。
Js語法：object.style.right="50px"
該屬性與：top,bottom,left是類似的
11.top
top 屬性規定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
注釋：如果 "position" 屬性的值為 "static"，那麼設置 "top" 屬性不會產生任何效果。
對於 static 元素，為 auto；對於長度值，則為相應的絕對長度；對於百分比數值，為指定值；否則為 auto。
對於相對定義元素，如果 top 和 bottom 都是 auto，其計算值則都是 0；如果其中之一為 auto，則取另一個值的相反數；如果二者都不是 auto，bottom 將取 top 值的相反數。
Js語法：object.style.top="50px"
12.vertical-align
vertical-align 屬性設置元素的垂直對齊方式。
該屬性定義行內元素的基準線相對於該元素所在行的基準線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
該屬性有以下幾種可選值：
- baseline 默認。元素放置在父元素的基準線上
- sub 垂直對齊文本的下標。
- super 垂直對齊文本的上
- top 把元素的頂端與行中最高元素的頂端對齊
- text-top 把元素的頂端與父元素字體的頂端對齊
- middle 把此元素放置在父元素的中部
- bottom 把元素的頂端與行中最低的元素的頂端對齊
- text-bottom 把元素的底端與父元素字體的底端對齊
- length
- %
下面的例子演示了如何在文本中垂直排列圖象：
<html> <head> <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="/i/eg_cute.gif" />位於段落中的影像。 </p> <p> 這是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位於段落中的影像。 </p> </body> </html>
運行該程式碼後顯示以下結果
13.visibility
visibility 屬性規定元素是否可見。
提示：即使不可見的元素也會佔據頁面上的空間。請使用 "display" 屬性來創建不佔據頁面空間的不可見元素。
這個屬性指定是否顯示一個元素生成的元素框。這意味著元素仍佔據其本來的空間，不過可以完全不可見。值 collapse 在表中用於從表布局中刪除列或行。
Js語法：object.style.visibility="hidden"
該屬性有以下幾種可選值：
- visible 默認值。元素是可見的。
- hidden 元素是不可見的
- collapse 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"
- inherit
下面的例子演示如何使表格元素疊加
<html> <head> <style type="text/css"> tr.coll { visibility:collapse } </style> </head> <body> <table border="1"> <tr> <td>Adams</td> <td>John</td> </tr> <tr class="coll"> <td>Bush</td> <td>George</td> </tr> </table> </body> </html>
結果如下：
14. z-index
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。
Js語法：object.style.zIndex="1"
下面的例子演示了z-index 用於將一個元素放置於另一元素之後。
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <h1>這是一個標題</h1> <img class="x" src="/i/eg_mouse.jpg" /> <p>默認的 z-index 是 0。Z-index -1 擁有更低的優先順序。</p> </body> </html>
結果如下：
