显示与定位.
在HTML中，元素會按照標準的“文檔流”布局方式進行布局，即“從左到右，從上到下”的方式進行布局，而通過CSS里面的部分定位和顯示方式的設置可以使元素脫離“文檔流”，采用特殊的布局方式進行布局，或者在頁面中進行“隱藏”，而“隱藏”在CSS中又有兩種定義方式，一種可以脫離“文檔流”，一種仍然存在于“文檔流”的布局中。
文檔流
文檔流處在網頁的最底層，它表示的是一個頁面中的位置，我們所創建的元素默認都處在文檔流中
元素在文檔流中的特點
塊元素
塊元素在文檔流中會獨占一行，塊元素會自上向下排列。
塊元素在文檔流中默認寬度是父元素的100%
塊元素在文檔流中的高度默認被內容撐開
內聯元素
內聯元素在文檔流中只占自身的大小，會默認從左向右排列，如果一行中不足以容納所有的內聯元素，則換到下一行，繼續自左向右。
在文檔流中，內聯元素的寬度和高度默認都被內容撐開
當元素的寬度的值為auto時，此時指定內邊距不會影響可見框的大小，而是會自動修改寬度，以適應內邊距
顯示 *
1、元素顯示方式
display 屬性規定元素的顯示方式。元素類型可分為塊級元素（block）、行內元素（inline）以及行內塊元素（inline-block），各類型的元素在呈現方式上也不盡相同。HTML文檔中自帶的標簽元素的“顯示類型”已經被定義，如果考慮到布局需要，有的時候我們會強制的將“顯示類型”進行轉換，在進行轉換后，該元素的功能和特性（如將
里和轉換為“block”的里）也不會產生變化。所以，在元素頁面布局的時候，若對“行內元素”、“行內塊級元素”和“塊級元素”已經理解得比較透徹了，根據需要完全可以大膽地對“顯示類型”進行轉換。
該屬性可以設置以下值：
值 描述
01、none 將元素設定為不顯示，使元素完全地脫離“文檔流”。（主要）
02、inline 將元素設定為“行內元素”。（主要）
03、inline-block 將元素設定為“行內塊元素”。（主要）
04、block 將元素設定為“塊元素”。（主要）
05、list-item 將元素設置為列表項。
06、run-in 根據上下文作為“行內塊元素”或“塊元素”顯示。
07、table 將元素作為table顯示。
08、inline-table 將元素作為行內的table顯示。
09、table-row-group 將元素作為一個tbody元素來顯示。
10、table-header-group 將元素作為一個thead元素來顯示。
11、table-footer-group 將元素作為一個tfoot元素來顯示。
12、table-row 將元素作為一個tr元素來顯示。
13、table-column-group 將元素作為一個colgroup元素來顯示。
14、table-column 將元素作為一個col元素來顯示。
15、table-cell 將元素作為一個table單元格元素來顯示。
16、table-caption 將元素作為一個table標題顯示。
17、flex 彈性布局*（主要）*
18、grid 網格布局*（主要）*
2、元素可見性
visibility 用于設置元素是否可見，該屬性即使元素不可見，也不會脫離文檔流，仍會占據空間，該屬性可以設置以下值：
visible：（默認），元素可見。
hidden：元素不可見，仍會占據空間。
提示：要隱藏元素，可以使用 display: none; 或 visibility: hidden;，但值得注意的是，將 visibility 的屬性值設置為 hidden，元素雖然不可見了，但仍未脫離“文檔流”，在頁面顯示中占據著原本的位置。而通過將 display 的屬性值設置為 none ，元素不可見了，而且在頁面中占據的位置也讓與“文檔流”內布局的其它元素了。通過這兩個屬性的這一特性，我們可以更加靈活地進行元素的顯隱操作，以達到更理想的頁面布局效果。
3、元素不透明度
opacity 用于設置元素的不透明度，該屬性的值范圍為：0 ~ 1，可以保留兩位小數，設值時可以省略 0，如：.5 或 .75。0（相當于 visibility:hidden;）表示完全透明，1（默認）表示完全不透明。
通過學習過上面的知識需要進行說明的是，將 opacity 的值設置為 0，和將 visibility 的值設置為 hidden 在布局表現上幾乎一致，但在對待用戶行為上卻有著很大的差別。因為，通過將 opacity 的值設置為 0 的方式，只是讓元素透明了，但仍然是可以讓如鼠標懸浮等事件生效的，而將 visibility 的值設置為 hidden 的方式，是不能觸發鼠標懸浮這一類的事件的，這點要注意區分。
4、鼠標指針類型
cursor 屬性規定要顯示的鼠標指針的類型（形狀）。該屬性具備以下值：
屬性值 描述
url 需使用的自定義光標的 URL，注釋：請在此列表的末端始終定義一種普通的光標，以防沒有由 URL 定義的可用光標。如：cursor: url("…/imgs/custorm.jpeg"), auto; *
default 默認光標（通常是一個箭頭）
auto 默認，瀏覽器設置的光標
crosshair 光標呈現為十字線
pointer 光標呈現為指示鏈接的指針（一只手）*
move 此光標指示某對象可被移動 *
e-resize 此光標指示矩形框的邊緣可被向右（東）移動
ne-resize 此光標指示矩形框的邊緣可被向上及向右移動（北/東）
nw-resize 此光標指示矩形框的邊緣可被向上及向左移動（北/西）
n-resize 此光標指示矩形框的邊緣可被向上（北）移動
se-resize 此光標指示矩形框的邊緣可被向下及向右移動（南/東）
sw-resize 此光標指示矩形框的邊緣可被向下及向左移動（南/西）
s-resize 此光標指示矩形框的邊緣可被向下移動（南）
w-resize 此光標指示矩形框的邊緣可被向左移動（西）
text 此光標指示文本 *
wait 此光標指示程序正忙（通常是一只表或沙漏）*
help 此光標指示可用的幫助（通常是一個問號或一個氣球）*
5、修改光標顏色
修改光標顏色使用 caret-color 屬性。
提示：運行效果光標呈藍色。
浮動 *
float 屬性可以使元素脫離文檔流，在父容器中進行浮動，停靠到父元素的內容邊界或其它浮動元素的邊框，浮動的元素會忽略元素間的空格，讓同樣具有該屬性的元素“緊密”地排列在一起。該屬性通常用于處理一些需要緊密排列在一起的“塊級元素”，如“導航條”、“相冊”，或用于處理“圖文混排”等。該屬性有三個允許的值：
none：默認，元素不進行浮動。
left：元素從左到右進行浮動。
right：元素從右到左進行浮動。
主流網站的兩列布局可通過浮動實現，如下所示：
在使用浮動 float 屬性的時候有一個需要特別注意的地方，就是若一個普通的“塊級元素”內的子元素全部都具有浮動屬性（值必須為 left 或 right ），那它自身的高度會為 0 像素，這是因為它的子元素已經全部脫離了“文檔流”，再加上HTML中的普通“塊級元素”若不設定 height 為大于“0”的像素值，那它在頁面中將不能顯示，所以這個元素在頁面中的高度固然為“0”。
若其子元素全部浮動的元素是獨立存在于一個已經參與“定位（本章接下來的內容會講到）”的元素內的話似乎也沒有什么影響，但若它已經參與了“文檔流”內的布局了的話，因為其高度為“0”的原因會給后續的元素布局帶來些麻煩，如下所示：
<div class="wrap"><!--左浮動--><section class="box t1"><img src="imgs/dusk.jpeg"><p>黃昏無疑是自然賜予的恩物，它像極博大深沉的懷抱，將一切溫存地攬入懷中。人變得特別容易依戀，一帶遠山、一棵原樹，抑或一段猶如沙漏慢搖的時光，此刻都被視為寶貴。你不想與之別離，如果硬生生拆分，就會如同游子訣別故鄉、詩人傷悼遠方一樣，產生宿命般的悲戚。黃昏總需要人生的大半年光加以解釋，方才明白你是樂于陷落最溫柔的人間煙火，還是在夕陽的牧場將自己徹底放逐。</p></section><!--右浮動--><section class="box t2"><img src="imgs/dusk.jpeg"><p>黃昏無疑是自然賜予的恩物，它像極博大深沉的懷抱，將一切溫存地攬入懷中。人變得特別容易依戀，一帶遠山、一棵原樹，抑或一段猶如沙漏慢搖的時光，此刻都被視為寶貴。你不想與之別離，如果硬生生拆分，就會如同游子訣別故鄉、詩人傷悼遠方一樣，產生宿命般的悲戚。黃昏總需要人生的大半年光加以解釋，方才明白你是樂于陷落最溫柔的人間煙火，還是在夕陽的牧場將自己徹底放逐。</p></section> </div> div.wrap { margin: 0 auto; }div.wrap > .box {width: 100%;box-sizing: border-box;padding: 10px 20px;margin: 30px auto;border: 1px solid #808080;border-radius: 5px; }div.wrap > .box > p {text-indent: 2em;line-height: 30px; }div.wrap > .box > img {width: 145px;height: 185px;border-radius: 5px;filter: opacity(.8); }div.wrap > .t1 > img { margin-right: 15px; float: left; } div.wrap > .t2 > img { margin-left: 15px; float: right;}通過上面的示例，我們可以清楚地看到，每個區塊元素
都沒有設置“height”屬性，而是想通過該元素內部的子元素自動地“撐起”它的高度，內部的文本的確是撐起了這個 元素的高度，但是意外的是，里面的 元素卻超出了其父元素 的下邊界。這是因為代碼中的兩個 元素都設置了 float 屬性，第一個值的為 left，第二個的值為 right ，都脫離了“文檔流”，也就是不再占據頁面內的高度了，所以出現了以上示例中的情況。浮動會使當前標簽產生向上浮的效果，同時會影響到前后標簽、父級標簽的位置及width 及 height 屬性。而且同樣的代碼，在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法在瀏覽器兼容性方面還有問題。
下面總結5種清除浮動的方法（測試已通過 IE Chrome Firefox opera）：
1）、父級元素定義 height
原理：父級元素手動定義 height，就解決了父級元素無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握 。
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級元素不一樣時，會產生問題 。
建議：不推薦使用，只建議高度固定的布局時使用 。
2）、結尾處加空 div 標簽，并設置 clear: both
原理：添加一個空div，利用css提供的clear:both清除浮動，讓父級div能自動獲取到高度 。
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題 。
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好 。
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法 。
3）、父級div定義 偽類:after 和 zoom
<div class="clearFix"><div class="fl">Float Left</div><div class="fr">Float Right</div> </div> <div>Hello, world!</div> /*清除浮動*/ .clearFix {zoom: 1;} .clearFix:after {content: '';display: block;height: 0;visibility: hidden;clear: both; }.fl {float: left;} .fr {float: right;}原理：IE8以上和非IE瀏覽器才支持 :after，原理和方法2有點類似，zoom(IE專有屬性)可解決IE6、7浮動問題。
優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等） 。
缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
4）、父級元素定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好 。
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
5）、父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度 。
優點：簡單、代碼少、瀏覽器支持好 。
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
浮動總結
float使元素浮動后，元素會脫離文檔流
元素脫離文檔流以后，它下邊的元素會立即向上移動
元素浮動以后，會盡量向頁面的左上或這是右上漂浮，直到遇到父元素的邊框或者其他的浮動元素
如果浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素
浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍
塊級元素浮動后寬度和高度默認由內容決定（如果沒有設置高度和寬度），內聯元素浮動以后會會變成塊級元素。
一個容器內所有子元素都浮動，會導致容器的高度塌陷。
定位 *
添加鏈接描述
在HTML中，元素的布局可以通過CSS的浮動屬性 float 和外間距屬性 margin，甚至是內間距屬性 padding 去實現，但是這些布局方式都存在著各種各樣的局限性，這個時候定位屬性 position 的出現絕對是對元素布局的一個非常好的補充。而且該屬性對所有顯示類型的元素適用。
該屬性主要有以下值：
static：默認值，采用元素默認的定位方式。
relative：相對定位
absolute：絕對定位
fixed：固定定位
該屬性除了值為 static 的情況，通常要配合 top、right、bottom 和 left 四個屬性去使用，這四個屬性允許的值為Web技術中常用的長度單位，如：“像素”、“百分數”、“字符大小”、“點”等。
設置過定位屬性的元素，有的時候會根據布局的需要出現重疊，重疊的規則是：在HTML文檔中后出現的元素會出現在先出現元素的上方。若要調整元素的層級可以通過 z-index 屬性進行設置，該屬性接受整型數值作為值，值越大的，層級越高，越接近用戶視覺，值越小則反之。
z-index 屬性的取值范圍在 -32767 至 32767 之間，0 為默認值。當然，我們通常不會去使用到該屬性的最小或最大值，為了便于管理頁面內元素的“層級關系”，通常我們都是將該屬性的值設置在一個比較便于管理的區間內，如 0 到 10 之間。
接下來我們開始對每種定位方式進行系統的學習。
1、相對定位
當一個元素的 position 屬性的值為 relative 時，元素對其原始位置進行“相對定位”，但元素在“文檔流”中所占據的位置仍然保留。
上述效果是沒有進行任何定位的示例，接下來，我們修改下代碼，對紅色視圖做一個相對定位，如下所示：
div.pos {background-color: red;position: relative;top: 70px;left: 50px; }通過示例我們可以發現，相對定位是相對于自身所在的位置進行定位的，并且，“相對定位”的元素并不會影響到其它元素在“文檔流”中的位置，而自身的“文檔流”位置也正常保留了的。在實際的開發中，用相對定位的情況比較少，一般用絕對定位會比較多。總結如下
開啟元素的相對定位后，如果不設置偏移量元素不會發生任何變化
相對定位元素相對于其自身在文檔流中的位置來定位
相對定位的元素不會脫離文檔流
相對定位不會改變元素的性質，塊元素還是塊元素，內聯元素還是內聯元素
相對定位的元素會提升一個層級
2、絕對定位
相對于離它最近的組先級元素中擁有position屬性（值不能為static）的那一個進行定位。一般用于相對于某個區間范圍進行定位，并且絕對定位會脫離文檔流。
若同級元素都具有“絕對定位”的屬性，那這些元素會重疊在一起，除非通過 z-index 屬性進行層級調整。若某個元素內存在一個唯一的絕對定位的元素，如果沒有給它設置“left”、“top”等這一系列的屬性，那它將會保持原位，但是一旦設置了“left”或“right”值，那元素將會在水平軸方向去執行絕對定位的規則，但垂直軸方向并不會發生位置變動。若設置了“top”或“bottom”（“left”和“right”值沒有設置的情況），那元素將會在垂直軸方向去執行絕對定位的規則。現在很多網站內的“二級導航菜單”就是利用絕對定位這一特性制作的。
需要指出的是，將一個元素設置為“絕對定位”后，它對元素的性質有以下幾種改變：
元素會從“文檔流”中脫離，不再占據頁面內“文檔流”的顯示位置；
“非塊級”的元素會被轉化成“塊級元素”；
元素的寬和高將對內容自適應（不再是“塊級元素”默認100%的寬度了）。
若一個具有寬和高的元素是其父級元素中唯一的子元素，并且其父元素沒有設置高度屬性，那父元素內容的高度將會變為“0”。
絕對定位的元素不會像浮動那樣讓文字環繞在周邊
絕對定位會使元素提升一個層級
根據“絕對定位”對元素的改變，記得在頁面布局的時候對設置了該屬性值的元素做一些針對性的調整，如：不用再給元素顯示地設置“display”屬性，用于節約代碼量，給沒有內容的元素及其父級元素設置寬和高等。
我們來看一組示例：
<div class="wrap"><div class="box pos"></div><div class="box"></div> </div> div.wrap {border: 1px solid #808080;position: relative; }div.box {width: 100px;height: 100px;margin: 30px 5px;background-color: blue; } div.pos {background-color: red;position: absolute;top: 70px;left: 50px; }上述示例中，紅色視圖為絕對定位，其是相對于父級元素 div.wrap 做相對定位的，我們可以看到，紅色視圖脫離了文檔流，不再占據空間，藍色視圖填補紅色視圖區域，由于沒有設置容器高度，因此整個容器的高度只獲取到了藍色視圖的高度。
在網頁制作中，我們會實現一些類似flash的圖片輪播效果，而該效果的實現方案也是通過絕對定位來實現的，直接上代碼：
<div class="flash-box"><!--圖片--><div class="imgs"><img src="images/1.jpg"><!--此處省略多余的圖片--></div><!--左右按鈕--><div class="btns"><span class="btn prev"></span><span class="btn next"></span></div><!--小圓點--><div class="idots"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div> </div> /*輪播圖基本布局*/ .flash-box {width: 520px;height: 280px;margin: 100px auto;/*指定position屬性，方便后代元素絕對定位*/position: relative; }.flash-box > .btns > .btn {display: inline-block;width: 45px;height: 30px;/*絕對定位*/position: absolute;top: 50%; }.flash-box > .btns > .prev {left: 0;background: url("../images/left.png") no-repeat center center; } .flash-box > .btns > .next {right: 0;background: url("../images/right.png") no-repeat center center; }.flash-box > .idots {/*絕對定位*/position: absolute;/*水平居中*/left: 50%;transform: translateX(-50%);bottom: 20px; } .flash-box > .idots > .item {display: inline-block;width: 9px;height: 9px;background: #ffa500;border-radius: 50%; }我們再來看一組示例：
<div class="wrap"><!--示例1--><article><section class="parent"><div class="blue-box"></div></section></article><!--示例2--><article class="grandpa"><section><div class="red-box"></div></section></article><!--示例3--><article><section><div class="black-box"></div></section></article> </div> /*絕對定位*/ div.wrap {border: 2px solid #000;height: 500px;/*flex 布局，子元素水平垂直居中*/display: flex;/*水平居中*/justify-content: space-around;/*垂直居中*/align-items: center; } div.wrap > article {width: 300px;height: 300px;border: 2px solid #800080;/*flex 布局，子元素水平垂直居中*/display: flex;/*水平居中*/justify-content: space-around;/*垂直居中*/align-items: center; }div.wrap > article > section {width: 60%;height: 60%;border: 2px solid #ffa500; }div.wrap > article > section > div {width: 100px;height: 100px; }/*示例1：藍色視圖相對于父級元素(橙色邊框)定位*/ div.wrap .parent {position: relative; } div.wrap div.blue-box {background-color: blue;position: absolute;top: 20px;left: 30px; }/*示例2：紅色視圖相對于爺爺級元素(紫色邊框)定位*/ div.wrap .grandpa {position: relative; } div.wrap div.red-box {background-color: red;position: absolute;top: 30px;left: 20px; }/*示例3：黑色視圖相對于容器視圖(黑色邊框)定位*/ div.wrap {position: relative; } div.wrap div.black-box {background-color: black;position: absolute;bottom: 0;right: 0; }案例分析：
絕對定位是相對最近的具有定位屬性position（值不能夠為static）的“祖先”級元素進行“相對定位”。對于藍色視圖所在的區域而言，我們為其父級元素 .parent 設置了 position 屬性，因此，藍色視圖是相對于橙色邊框所在的元素定位的；紅色視圖相對于紫色邊框（.grandpa）定位，黑色視圖相對于黑色邊框（.wrap）定位。
絕對定位也常用于布局二級導航，下面將貼出通過絕對定位設置二級導航的示例：
<nav><ul class="menu-box"><li><a href="javascript:;">HOME</a><ul class="submenu"><li><a href="javascript:;">OPTIONS</a></li><li><a href="javascript:;">OPTIONS</a></li><li><a href="javascript:;">OPTIONS</a></li><li><a href="javascript:;">OPTIONS</a></li><li><a href="javascript:;">OPTIONS</a></li></ul></li><li><a href="javascript:;">ABOUT</a><ul class="submenu"><li><a href="javascript:;">OPTIONS</a></li><li><a href="javascript:;">OPTIONS</a></li><li><a href="javascript:;">OPTIONS</a></li></ul></li><li><a href="javascript:;">TEAM</a></li><li><a href="javascript:;">NEWS</a></li><li><a href="javascript:;">JALLERY</a></li><li><a href="javascript:;">CONTENT</a></li></ul> </nav> ul {list-style: none;margin: 0; padding: 0; } li {box-sizing: border-box;} a {text-decoration: none;}/*一級菜單*/ nav > .menu-box {width: 100%;min-width: 1100px;text-align: center;/*解決因 inline-block 產生的間距*/font-size: 0; }nav > .menu-box > li {width: 160px;height: 55px;background-color: #0C0000;display: inline-block;/*子元素垂直居上對齊*/vertical-align: top;/*文本水平/垂直居中*/text-align: center;line-height: 55px;position: relative; }nav > .menu-box > li > a {color: #808080;font-size: 18px; }nav > .menu-box > li:hover {border-left: 2px solid #D40000;background-color: #1C1C1C; } nav > .menu-box > li:hover > a {color: #D40000; } nav > .menu-box > li:hover > .submenu {display: block; }/*二級菜單*/ nav .submenu {display: none;position: absolute;top: 55px;left: -2px; }nav .submenu li{display: block;width: 160px;height: 55px;background-color: #0C0000;border-top: 1px solid #181818;border-bottom: 1px solid #303030; }nav .submenu li > a {color: #808080;font-size: 18px; }nav .submenu li:hover {background-color: #1C1C1C; } nav .submenu li:hover > a {color: #fff; }3、固定定位
當一個元素的 position 屬性的值為 fixed 時，那它會相對于瀏覽器邊界進行定位，并且當頁面存在滾動條的時候，頁面的滾動也不會對其和瀏覽器邊界之間的相對位置產生影響，就像是“漂浮”在一個固定的地方一樣，所且該定位方式也會脫離“文檔流”，它和文檔內的元素都不會有任何布局上的互相干擾。針對“固定定位”的這些特性，它通常用于以下情景：
彈出框底部的“遮罩層”
現在的網頁設計基本不會再去采用瀏覽器引擎內自帶的那種彈出提示框，而一般是開發者根據美工的要求自定義的彈出框，但自行設計的彈出框并不具備頁面事件阻塞功能，為了防止用戶“繞過”彈出框去繼續對頁面元素進行操作，絕大部分時候都會在彈出框下方（通過 z-index 設置層級關系）添加一層“遮罩”（這層遮罩可以是透明的，也可以是色彩半透明的），這樣用戶就不能再通過鼠標點擊的方式去操作彈出框“下方”的內容了。
頁面浮動二維碼
微信公眾號是現在各類商家推廣自身品牌，自媒體發布的一個非常主流的手段，所以在自己的官方網站的空白處都會“懸浮”著一個二維碼，若用戶不需要關注這個商家（企業、機構、學院等）點擊該二維碼旁的關閉按鈕即可關閉二維碼。
“回到頂部”按鈕
現在內容稍多的網站，為了顧及到用戶體驗，幾乎都會在頁面空白的適當位置加上一個“回到頂部”按鈕，需要該按鈕的位置不受頁面滾動的影響，最高效的辦法（也可以利用JavaScript去做，再配以CSS的過渡特效，可以實現一定的動態效果，但相對低效）也就是通過“固定定位”去實現了。
網站/應用操作指引
現在做得較好的互聯網網站為了迎合大眾的賞美和做功能上的一些調整，時常會涉及到網站風格及內容的改版，這樣網站上的功能內容、位置結構都會涉及到改動，會讓新老用戶都“無從下手”，這個時候利用CSS中“固定定位”元素設計的“指引步驟”，再配以JavaScript的控制，會讓用戶有一種“這個網站做得很人性化”的感覺。但這種設計也不要濫用，凡事都有個度，用戶體驗設計亦是如此，若太多地采用這種方式反而會影響一些熟悉該網站的用戶的操作流暢度。
固定的頂部導航欄
有些網站希望用戶盡可能多地瀏覽本站的內容，但由于設計風格開闊或者信息內容太多等原因，導致每頁的內容都比較多，通過“回到頂部”按鈕又增加了操作步驟（在用戶體驗設計中重要的一環就是要求用戶操作數更少，但能實現的交互功能更多），這個時候通過“固定定位”將網站導航欄“浮動固定”在頁面的頂部，這樣用戶無論在頁面內容的什么地方，都能更方便地進行頁面的跳轉了。
總結
- 上一篇： 贷
- 下一篇： 第4章-模板引擎Jade和Handleb