1、課程名稱：HTML語言,6 頁面中的層,目標(biāo): 掌握使用層 (演示：移動(dòng)的層。),6.1 使用層,層實(shí)際上是一種界于HTML和CSS之間的元素，層不只是提供像素級(jí)精確的定位，用戶還可以將某個(gè)層堆疊到另一個(gè)層的上面，在顯示某些層的同時(shí)隱藏其他的層。,6.1.1 創(chuàng)建層,HTML/CSS代碼實(shí)現(xiàn) 中添加- 中添加- . ,6.1.1 創(chuàng)建層,層常放在標(biāo)簽中，屬性值為： Width 設(shè)置對(duì)象的寬度； Height 設(shè)置對(duì)象的高度； Position 設(shè)置對(duì)象的位置； 1、 static :默認(rèn)值。無特殊定位，對(duì)象遵循HTML定位規(guī)則 2、 absolute :將對(duì)象從文檔流中拖出，使用 left ，

2、 right ， top ， bottom 等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象，則依據(jù) body 對(duì)象。而其層疊通過 z-index 屬性定義 3、 fixed :未支持。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范 4、 relative :對(duì)象不可層疊，但將依據(jù) left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置 Z-index 決定層的先后順序和覆蓋關(guān)系；,Z-index屬性,Z-index 決定層的先后順序和覆蓋關(guān)系； 取值： auto :默認(rèn)值。遵從其父對(duì)象的定位 number :無單位

3、的整數(shù)值。可為負(fù)數(shù) 說明： 1、檢索或設(shè)置對(duì)象的層疊順序。2、較大 number 值的對(duì)象會(huì)覆蓋在較小 number 值的對(duì)象之上。如兩個(gè)絕對(duì)定位對(duì)象的此屬性具有同樣的 number 值，那么將依據(jù)它們?cè)贖TML文檔中聲明的順序?qū)盈B。對(duì)于未指定此屬性的絕對(duì)定位對(duì)象，此屬性的 number 值為正數(shù)的對(duì)象會(huì)在其之上，而 number 值為負(fù)數(shù)的對(duì)象在其之下。設(shè)置參數(shù)為 null 可以移除此屬性。3、此屬性僅僅作用于 position 屬性值為 relative 或 absolute 的對(duì)象。,層實(shí)例, 框架舉例 , 山東科技大學(xué)濟(jì)南校區(qū) 山東科技大學(xué)濟(jì)南校區(qū) 山東科技大學(xué)濟(jì)南校區(qū) ,層的嵌套, 框架舉例 ,6.1.2 層溢出,層“溢出”屬性用來設(shè)置當(dāng)層的內(nèi)容超過層的指定大小時(shí)，對(duì)層內(nèi)容的顯示方法。 HTML/CSS代碼實(shí)現(xiàn) /中添加 /中添加,6.1.2 層溢出,Overflow屬性控制文本顯示，有4個(gè)值： Visible：當(dāng)層的內(nèi)容超過指定大小時(shí)，層的邊界會(huì)自動(dòng)延伸，以容納這些內(nèi)容。 Hidden：層的內(nèi)容超過指定大小時(shí)，將隱藏超出部分的內(nèi)容。 Scroll：瀏覽器將在層上添加滾動(dòng)條。 Auto：當(dāng)層的內(nèi)容超過指定大小時(shí)，瀏覽器才顯示層的滾動(dòng)條。