定位: 目的-------佈局
步驟:
- 第一步: 通過position屬性設定定位元素相對於誰進行定位(找個參照物)
- 第二部: 通過設定left right top bottom 屬性 確定定位元素距離 參考元素的位置.
優先順序:
- left>right
- top>bottom
position 屬性值:
- relative相對定位,於當前標籤沒有移動之前的位置為參照進行定位,不會將對應的標籤從父級中脫離出來(不會脫離文件流)
- absolute (重點,頻率最高)絕對定位;已定位父元素為參照進行定位,並且已定位父元素的屬性 值必須為relative absolute或者fixed,如果父級標籤中都沒有定位,最終標籤會以document為參照進行定位, 元素設定absolute之後,會從父元素中脫離出來(脫離文件流),提升層級.
- fiexd 固定定位: 以瀏覽器視窗為參照物進行定位,也會讓當前元素從文件流中脫離出來(脫離文件流)
- static(預設值)靜態定位,無參照物,不會進行定位
------------------------------------------------------------------------------------------>
絕對定位:
- 相對於已定位父元素進行定位,並且父元素position屬性值為relative absolute fixed
如果沒有已定位父級 會相對於 document 進行定位.
特徵:
第一 脫離文件流 (父級不在保留元素原來的位置 )
第二 提升層級
第三 結合相對定位使用(給父元素設定position:relative)
第四 如果給塊元素設定相對定位,寬高預設有內容撐開 不在獨佔一行,margin 的左右auto失效
第五 行元素設定絕對定位後,行元素會支援寬高的設定,支援上下的padding border margin
後定位的元素會蓋先定位的元素
-->
固定定位:
- 相對於瀏覽器視窗進行定位
特徵:
1, 固定之後,元素脫離文件流(父級不會保留該元素的高度)
2, 提升層級
3, 父元素設定固定定位,不用清除子元素浮動所產生的影響
4 , IE6不相容
5, 如果給塊元素設定固定對定位,寬高預設有內容撐開 不在獨佔一行,margin 的左右auto失效
6, 行元素設定固定定位後,行元素會支援寬高的設定,支援上下的padding border margin
後定位的元素會蓋先定位的元素
<div class="fatDiv">
<div class="sonDiv"></div>
</div>
<p>sdafasasdsa</p>
<style type="text/css">
.fatDiv{
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
/*第一步:設定position屬性*/
position: relative;
/*第二步:確定位置*/
/*left: 200px;*/
/*top: -50px;*/
}
.sonDiv{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
/*margin: 0 auto;*/
left: 50px;
right: 100px;
/*top: 50px;*/
}
</style>複製程式碼層級
z-index: 用來調整定位元素的層級值越大,元素顯示越靠前,該屬性的預設值為0,當元素的z-index 相同時,遵循後來居上的原則(後定位的元素會蓋住先定位的元素)。
設定透明度的第一種方式:設定opacity 屬性，屬性的取值範圍: 0~1
IE 6 不識別opacity屬性,是通過 filter屬性來設定透明度的
語法結構:
filter:alpha(opacity=50);
取值範圍 0~100;
/*第二種設定透明度的方式*/
background-color: rgba(0,0,0,0.5);