Web前端開發(fā)（HTML5+CSS3+JavaScript） 課件 第6章 6.1-定位

Web前端基礎(chǔ)技術(shù)CSSJSHTML第6章6.1-位置與定位Contents目錄默認(rèn)位置相對(duì)位置、絕對(duì)位置固定位置粘性位置（1）位置屬性，position屬性(5個(gè))取值：static(默認(rèn)值，正常文檔流位置：從上到下(塊元素）、從左到右（行內(nèi)元素）：位置固定，不可改變。relative：相對(duì)位置，相對(duì)其正常位置定位。absolute：絕對(duì)位置，相對(duì)非static的父元素定位。fixed：固定位置，相對(duì)瀏覽器窗口定位。sticky：粘性位置，距離可滾動(dòng)容器（瀏覽器）邊緣一定距離時(shí)固定不滾動(dòng)（凍結(jié)）。z-index：多塊重疊時(shí)，塊在z-軸位置(position除static外)定位：使用位置屬性position與定位屬性left、top、right和bottom屬性結(jié)合，來確定元素在頁面的位置.位置屬性position：A)relative：相對(duì)原來的位置，偏離左或右(left|right之一

）、上或下（top|bottom之一）位置，一般通過改變左上角（lefttop）來改變其位置。特性：（1）整體浮動(dòng)在頁面，不影響其他元素的布局，但仍然占據(jù)原來空間（位置）（2）應(yīng)用：通常為子元素的絕對(duì)定位作為參考。例1：理解相對(duì)位置的特性認(rèn)識(shí)特性：通過lefttop或bottomright來改變位置，但仍然占據(jù)原來空間。一般較少單獨(dú)使用，主要作為容器為其他子元素提供參考定位。<!--相對(duì)原來的位置產(chǎn)生浮動(dòng)；但仍舊占據(jù)原來的空間--><divclass="container"><divclass="top">默認(rèn)位置</div><divclass="middle">相對(duì)位置，偏移x,y20px20px</div><divclass="bottom">默認(rèn)位置</div></div>*{box-sizing:border-box;}.container{width:200px;border:10pxsolidred;}.container>div{height:40px;}.top{background-color:yellow;}.middle{background-color:gray;position:relative;}.bottom{background-color:gold;}.container:hover>.middle{

/*left:20px;top:20px;*/bottom:20px;right:20px;}B).absolute：相對(duì)具有非默認(rèn)位置的父元素進(jìn)行定位；脫離了原來的位置，不再占用原來位置（空間），寬度高度默認(rèn)由內(nèi)容決定（行內(nèi)塊元素特征）。特征：（1）相對(duì)取值為relative、absolute、fixed的父元素來定位在頁面的任意位置。（2）整體浮動(dòng)在頁面，不影響其他元素的布局，不再占據(jù)原來空間（位置）（3）可用于塊元素和行內(nèi)元素，都具有行內(nèi)塊元素特征，可以設(shè)置寬度和高度；可以同時(shí)改變left和right來改變寬度；或者同時(shí)改變top和botton來改變高度。注意?。。。盒枰鞔_相對(duì)哪個(gè)父元素定位！---實(shí)際應(yīng)用中，是相對(duì)具有relative位置屬性的父元素相對(duì)父容器，通過同時(shí)改變left|top（左上角位置）、right|bottom（右下角位置）屬性定位到任意位置；如果寬度不設(shè)定，則其寬度跟隨left、right的同時(shí)改變，高度同理；父元素必須是relative，實(shí)際上，你可以認(rèn)為：relative元素就是為absolute提供定位用的。（2）定位屬性left：子元素左邊（外側(cè)）離父元素左邊框內(nèi)側(cè)距離right：子元素右邊離父元素右邊框內(nèi)側(cè)距離top：子元素頂端離父元素上邊框內(nèi)側(cè)距離bottom：子元素底部離父元素下邊框內(nèi)側(cè)距離僅僅改變left：0；top：0；僅僅改變r(jià)ight：0；bottom：0；例2：理解絕對(duì)位置的特性<!--絕對(duì)位置，相對(duì)父元素浮動(dòng)；不再占據(jù)原來的空間--><!--默認(rèn)浮動(dòng)在原來位置--><divclass="container"><divclass="top">默認(rèn)位置</div><divclass="middle">絕對(duì)位置</div><divclass="bottom">默認(rèn)位置</div></div>12默認(rèn)絕對(duì)位置：原來位置left:0;top:0;3right:10px;bottom:10px;4右邊頂部對(duì)齊(1)理解相對(duì)容器的top、left、right和bottom四個(gè)位置定位；(2)相對(duì)容器內(nèi)部邊框線的距離，不計(jì)父容器的padding。

*{box-sizing:border-box;}.container{width:200px;border:10pxsolidred;

/*參考定位容器*/position:relative;}.container>div{height:40px;}.top{background-color:yellow;}.bottom{background-color:gold;}.middle{background-color:gray;

position:absolute;/*2*/

/*left:0;top:0;*//*3*/

/*right:10px;bottom:10px;*//*4*/

left:190px;/*內(nèi)180+10右邊框*/top:-10px;

width:100px;}例3理解相對(duì)誰進(jìn)行絕對(duì)定位；容器的概念---實(shí)現(xiàn)如下的二級(jí)導(dǎo)航菜單效果<divclass="container"><ulclass="nav"><li><ahref="#">導(dǎo)航鏈接1</a><divclass="nav-group"><ahref="#">二級(jí)導(dǎo)航11</a><ahref="#">二級(jí)導(dǎo)航12</a>

</div></li><li><ahref="#">導(dǎo)航鏈接2</a><divclass="nav-group"><ahref="#">二級(jí)導(dǎo)航21</a><ahref="#">二級(jí)導(dǎo)航22</a></div></li></ul></div>如果相對(duì)main進(jìn)行定位，那么效果就是京東界面的導(dǎo)航菜單效果---試試？顯示與隱藏：display屬性：none/block<style>*{box-sizing:border-box;}.container{width:400px;border:1pxsolidgray;position:relative;}ul{list-style:none;padding:0;margin:0;width:200px;text-align:center;}li{position:relative;background-color:#ccc;}.nav-group{width:200px;min-height:200px;background-color:#ccc;/**/position:absolute;left:200px;top:0;/**/display:none;}li:hover.nav-group{display:block;}

</style>例4思路擴(kuò)展：相對(duì)位置和絕對(duì)位置-購物車數(shù)字和圖標(biāo)border-radius:4px4px4px4px;/*上右下左4px圓角*/border-radius:50%;/*寬度和高度一致時(shí)，為圓*/<divclass="container"><ahref="#">我的購物車</a><divclass="cart"><spanclass="num">12</span></div></div><style>*{

box-sizing:border-box;

}a{text-decoration:none;color:#999;margin:020px;}.container{width:200px;height:40px;

/*文本元素居中：行高等于內(nèi)容高度（有上下邊框）*//*line-height:40px;*/line-height:38px;border:1pxsolid#ccc;/*為購物車圖標(biāo)參考定位*/position:relative;}/*購物車圖標(biāo)：容器任意位置---絕對(duì)定位*/.cart{position:absolute;width:20px;height:20px;/*居中計(jì)算：內(nèi)部高度38px（不計(jì)邊框）：38-20/2*/top:9px;right:40px;

background-image:url('./images/cart_empty.png');background-size:100%100%;}.num{position:absolute;width:20px;height:20px;/*圓角*/border-radius:50%;top:-10px;right:-20px;

/*文本樣式*/background-color:red;color:white;font-size:12px;text-align:center;line-height:20px;}/*添加以下樣式，則可以將圖標(biāo)移動(dòng)到左邊*/.cart{

left:20px;}a{padding-left:60px;}目標(biāo)體現(xiàn)（練習(xí)）：模擬京東購物車效果鼠標(biāo)懸停

<body><divclass="container"><ahref="">我的購物車</a><divclass="cart"><spanclass="num">10</span></div><divclass="line"></div><divclass="drop"></div></div>

<style>*{box-sizing:border-box;}.container{width:200px;height:60px;line-height:60px;padding-left:20px;background-color:#ccc;margin:100px;/**/position:relative;/**/border:1pxsolidred;}.container>a{text-decoration:none;background-color:yellow;}.cart{/**/.drop{width:400px;height:200px;border:1pxsolidred;/**/position:absolute;left:-1px;/*top:60px;*/top:58px;/*完全重疊*/display:none;}.line{position:absolute;border:1pxsolidwhite;left:0;right:0;top:58px;z-index:100;display:none;}.container{background-color:white;}.container:hover.drop{display:block;}.container:hover.line{display:block;}</style>width:24px;height:24px;border:1pxsolidred;/**/position:absolute;top:18px;right:40px;}.cart>.num{background-color:red;width:20px;height:20px;line-height:20px;/*注意，行高會(huì)繼承*//**/position:absolute;left:14px;top:-10px;border-radius:50%;color:white;font-size:10px;text-align:center;}2C).fixed：類似絕對(duì)定位,不同的是其相對(duì)瀏覽器窗口定位（特殊的絕對(duì)定位），即：固定于頁面指定位置；不隨頁面滾動(dòng)而滾動(dòng)；不占據(jù)正常塊位置；寬度高度由內(nèi)容決定，也可以改變；默認(rèn)位置：lefttop為(00)注意：使用left|right|top|bottom之一或組合使其固定在某個(gè)位置。相對(duì)瀏覽器窗口定位。有效屬性與absolute基本相同，不同之處：absolute相對(duì)頁面時(shí)會(huì)隨頁面滾動(dòng).示例5京東側(cè)邊欄：相對(duì)頁面的絕對(duì)定位，固定位置fixed的使用行內(nèi)元素，如span、a等轉(zhuǎn)換為塊元素時(shí)可以改變寬度和高度；子元素會(huì)觸發(fā)父元素的hover事件；通常使用子元素來撐大父元素<divclass="container"><ul><li><ahref="#"class="link-imgimg1"></a><ahref="#"class="link-txt">優(yōu)惠券</a></li><li><ahref="#"class="link-imgimg2"></a><ahref="#"class="link-txt">我的購物車</a></li><li><ahref="#"class="link-imgimg3"></a><ahref="#"class="link-txt">客服</a></li></ul></div>*{box-sizing:border-box;}.container{position:fixed;right:0;width:40px;top:0;bottom:0;background-color:#eee;}ul{list-style:none;padding:0;margin:0;/*位置：為了居中顯示*/position:absolute;width:100%;

right:0;

/*整體居中顯示*/top:50%;margin-top:-60px;}li{position:relative;height:40px;}/*鏈接圖片：無文字，帶背景圖*/li>a{display:block;height:100%;background-color:#ccc;}.link-img{background-size:60%60%;background-repeat:no-repeat;background-position:center;}.img1{background-image:url('./images/優(yōu)惠券.png');}.img2{background-image:url('./images/購物車.png');}.img3{background-image:url('./images/客服.png');}

/*鏈接-提示文本*/.link-txt{position:absolute;width:160px;right:-160px;top:0;background-color:#ccc;

z-index:-1;/*文本對(duì)齊*/padding:020px;line-height:40px;}li:hover.link-txt{/*display:block;*/right:0;/*過渡效果*/transition:right1s;}</style>D).

position:sticky作用：在頁面/塊元素出現(xiàn)滾動(dòng)條時(shí)，元素超過設(shè)定的top/left/right/bottom（相對(duì)出現(xiàn)滾動(dòng)條的父容器）值則浮動(dòng)在頁面不滾動(dòng)

注意：

必須設(shè)置top/bottom/left/right值之一；示例6理解sticky及其應(yīng)用<divstyle="height:400px;border:1pxsolidred;">這是其他內(nèi)容，模擬頁面其他內(nèi)容，目的使?jié)L動(dòng)條出現(xiàn)</div><divclass="sticky">這是會(huì)浮動(dòng)的div</div><p>滾動(dòng)的內(nèi)容，作為參考</p><p>滾動(dòng)的內(nèi)容，作為參考</p><p>滾動(dòng)的內(nèi)容，作為參考</p><p>滾動(dòng)的內(nèi)容，作為參考</p><p>滾動(dòng)的內(nèi)容，作為參考</p><p>滾動(dòng)的內(nèi)容，作為參考</p><p>滾動(dòng)的內(nèi)容，作為參考</p><divstyle="height:400px;border:1pxsolidred;">這是其他內(nèi)容，模擬頁面其他內(nèi)容，目的使?jié)L動(dòng)條出現(xiàn)</div><style>.sticky{height:40px;background-color:yellow;/*sticky*/position:sticky;top:100px;}</style>12<body><divstyle="height:800px;background-color:yellowgreen;"></div><divclass="container"><divclass="top"></div><divclass="sticky">sticky</div><divclass="bottom"></div></div><divstyle="height:800px;background-color:yellowgreen;"></div></body><style>/*容器帶注釋和取消注釋的效果，說明：相對(duì)具有滾動(dòng)條的父元素*/.container{overflow:scroll;height:400px;}.top{height:400px;background-color:red;}.sticky{height:100px;background-color:green;