CSS（10） Position(定位)
阿新 • • 發佈：2022-05-13
一、position 屬性
指定了元素的定位型別。
position 屬性的五個值：
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決於定位方法。
1、static 定位
HTML 元素的預設值，即沒有定位，遵循正常的文件流物件。
靜態定位的元素不會受到 top, bottom, left, right影響。
$1``` } [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_position_static) ### 2、fixed 定位 元```css $1``` position:fixed; top:30px; right:5px; } [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_position_fixed) ```css $1``` #ads{ ```css $1``` _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); ```css $1``` h2.pos_left { position:relative; left:-20px; ```css $1``` } [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_position_relative) 移動相對定位元素，但它原本所佔的空間不會改變。 h2.pos_top { position:relative; top:-50px; } [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_position_relative2) 相對定位元素經常被用來作為絕對定位元素的容器塊。 ### 4、absolute 定位 ```css $1``` left:100px; top:150px; } [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_position_absolute) absolute 定位使元素的位置與文件流無關，因此不佔據空間。 ```css $1``` 它的行為就像 **position:relative;** 而當頁面滾動超出目標區域時，它的表現就像 **position:fixed;** ，它會固定在目標位置。 元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位。 這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。 **注意:** Internet Explorer, Edge 15 及更早 IE 版本不支援 sticky 定位。 Safari 需要使用 -webkit- prefix (檢視以下例項)。 div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; } [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_position_sticky) ```css $1``` img { position:absolute; left:0px; top:0px; ```css h1.hidden {visibility:hidden;}
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
*```css
h1.hidden {display:none;}
CSS overflow 屬性可以控制內容溢位元素框時在對應的元素區間內新增滾動條。 overflow屬性有以下值： * visible：預設值。內容不會被修剪，會呈現在元素框之外。 * hidden：內容會被修剪，並且其餘內容是不可見的。 * scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。 * auto：如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。 * inherit：規定應該從父元素繼承 overflow 屬性的值。 **注意:** overflow 屬性只工作於指定高度的塊元素上。 **注意:** 在 OS X Lion ( Mac 系統) 系統上，滾動條預設是隱藏的，使用的時候才會顯示 (設定 "overflow:scroll" 也是一樣的)。 ### overflow: visible 預設情況下，overflow 的值為 visible， 意思是內容溢位元素框： div { width: 200px; height: 50px; background-color: #eee; overflow: visible; } [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_overflow_visible) ## 三、CSS Display(顯示) 與 Visibility（可見性） display屬性設定一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。 ### 1、隱藏元素 - display:none或visibility:hidden 隱藏一個元素可以通過把display屬性設定為"none"，或把visibility屬性設定為"hidden"。但是請注意，這兩種方法會產生不同的結果。 visibility:hidden可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。 h1.hidden {visibility:hidden;} [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_visibility_hidden) d```css li {display:inline;}
2、CSS 塊和內聯元素
span {display:block;}
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
塊級元素主要有：
__address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 ,
h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre ,
table , ul , li
2、內聯元素
$1``` , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var **3、可變元素** (根據上下文關係確定該元素是塊元素還是內聯元素)： __applet ,button ,del ,iframe , ins ,map ,object , script ### **3、CSS中塊級、內聯元素的應用：** 利用CSS我們可以擺脫上面表格裡HTML標籤歸類的限制，自由地在不同標籤/元素上應用我們需要的屬性。 主要用的CSS樣式有以下三個： * __display:block -- 顯示為塊級元素 * __display:inline -- 顯示為內聯元素 * __display:inline-block -- 顯示為內聯塊元素，表現為同行顯示並可修改寬高內外邊距等屬性 我們常將list元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。 ### 4、如何改變一個元素顯示 可以更改內聯元素和塊元素，反之亦然，可以使頁面看起來是以一種特定的方式組合，並仍然遵循web標準。 下面的示例把列表項顯示為內聯元素： li {display:inline;} [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_display_inline_list) 下面的示例把span元素作為塊元素： span {display:block;} [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_display_block2) **注意：** 變更元素的顯示型別看該元素是如何顯示，它是什麼樣的元素。例如：一個內聯元素設定為display:block是不允許有它內部的巢狀塊元素。 ## 四、clip 剪輯一個絕對定位的元素。值： _shape、_ auto、inherit 裁剪一張影象： img { position:absolute; clip:rect(0px,60px,200px,0px); } [嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_clip) 