《定位網頁元素》
一、網頁的定位機制
1.網頁中的三種定位機制
a、標準文件流
b、浮動float
c、絕對定位
2.僅用浮動和盒子模型，無法實現特定情況下的複雜定位
a、右上角的關閉按鈕效果
b、固定在右下角的回頂部
c、滑鼠移上去的下拉效果
3.position屬性實現元素的定位（position：定位，位置）
a、static 預設值，沒有定位，即按照標準文件流排布
b、relative相對定位
c、absolute絕對定位
d、fixed固定定位
二、fixed定位
1.fixed：固定
2.以瀏覽器視窗為基準進行定位，滾動文件頁面的時候，依然保持物件位置不變
3.通過position：fixed屬性設定
4.設定為fixed定位後，即脫離了標準文件流，對其他頁面元素將不再影響
5.參照瀏覽器視窗，通過座標來進行定位：
left、right、top、bottom
6.座標的值：
a、可以是具體的畫素
b、也可以是百分比（這裡是相對於瀏覽器）
c、以上兩個值都可正可負，負即為反方向
7.案例：
a、定位在右下角
b、定位在頂部工具欄佔滿整行
c、定位在底部工具欄佔滿整行
8.如何讓元素水平垂直都居中
a、設定寬度
b、left:50%
c、margin-left設定為負數，且為寬的一半
transform:translate(-50%,-50%);指的是向左移動自身寬度的50%,向上移動自身高度的50%。
transform:translate(x,y);
三、相對定位relative
1.relative：相對的
2.通過position：relative設定元素為相對定位
a、相對定位的盒子會相對於它原來的位置，通過指定偏移，到達新的位置
b、相對定位的盒子仍在標準文件流中，它對父級盒子和相鄰的盒子沒有任何影響
c、相對定位的盒子原來的位置會被保留下來
3.相對定位一般很少單獨使用，都是配合絕對定位使用
四、絕對定位absolute
1.absolute：絕對
2.通過position:absolute設定元素為絕對定位
a、絕對定位的元素會脫離標準文件流
b、絕對定位的元素，可以通過left、right、top、buttom定位
c、以它最近的乙個已經定位的祖先元素為參照物進行偏移
d、已經定位的祖先元素是指position為relative/fixed/absolute其中之一的元素
e、如果沒有已經定位的祖先元素，那麼會以瀏覽器為參照物進行定位
f、如果設定了絕對定位，又沒有設定偏移量，元素會脫離文件流，但保持在原有的位置
g、通常和相對定位聯用，讓相對定位relative充當絕對定位的父元素作為參照物
3.完成多個div盒子關閉效果的製作
a、會出現多個關閉按鈕「x」位於同一位置，應該對它的父級元素設定相對定位
b、可能會出現空白邊，是換行導致的，不能刪除，應該使用display：block
五、元素的定位層次
1.z-index 屬性用於調整元素定位時重疊層的上下位置
2.z-index屬性在立體空間中表示垂直於頁面方向的z軸
3.z-index屬性的值為整數，可正可負
4.z-index只有在設定了position定位的情況下才起作用
5.z-index的預設值是0
6.屬性值大的位於屬性值小的上方，如果值一樣，則後來居上
7.設定元素透明：
a、opacity—css3新增加的
b、filter:alpha(opacity=x)—早期的ie瀏覽器支援
c、background:rgba(0,0,0,0.5);
d、透明度的範圍是0-1
8.通過設定line-height來實現單行文字的垂直居中
9.案例：相框上面顯示文字標題說明，文字標題的背景是半透明的
六、faststonecapture軟體的使用
七、綜合案例
1.帶箭頭的列表
a、小可以去iconfont**去找
2.相框上面顯示文字標題說明，文字標題的背景是半透明的
涉及到的知識點：
a、重置邊框:margin:0;padding:0;
b、div、cetion、img、p標籤
c、浮動float、清除浮動overflow:hidden
d、position，相對定位relative、絕對定位absolute
e、display:block
f、text-align:center，background:rgba(0,0,0,0.5)
3.模擬實現乙個簡單的輪播圖效果
4.實現下拉列表效果
定位網頁元素
定位屬性position static 預設值，沒有定位 relative 相對定位 third 例 偏移設定 top 上 left 左 right 右 bottom 下 偏移位置設定是距離設定方向的邊框的距離 在邊框內是正 absolute 絕對定位 使用了絕對定位的元素以它最近的乙個 已經定位 ...
定位網頁元素
一.定位網頁元素 position 1.static 預設值，代表沒有定位，元素沒有定位會以標準文件流方式展現出來 2.relative 相對定位，元素以自身原來位置進行定位 如果設定元素浮動，那麼會以浮動後的位置作為原來的位置 規律 設定相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置...
定位網頁元素
一.定位網頁元素 position 1.static 預設值，代表沒有定位，元素沒有定位會以標準文件流方式展現出來 2.relative 相對定位，元素以自身原來位置進行定位 如果設定元素浮動，那麼會以浮動後的位置作為原來的位置 規律 設定相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置...