1.靜態(tài)定位
- position:static;
- 定位的默認(rèn)值,文檔流
2.絕對(duì)定位
- position:absolute;
- 特點(diǎn)
- 元素使用絕對(duì)定位之后處于脫標(biāo)不占據(jù)原來(lái)的位置
- 元素使用絕對(duì)定位，位置是從瀏覽器出發(fā)
- 嵌套的盒子，父盒子沒(méi)有使用定位，子盒子絕對(duì)定位，子盒子位置是從瀏覽器出發(fā)
- 嵌套的盒子，父盒子使用定位，子盒子絕對(duì)定位，子盒子位置是從父元素位置出發(fā)
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,div{ margin: 0; padding: 0; } .big{ margin: 20px; background-color: beige; width: 100px; height: 100px; /*position: absolute;*/給父盒子相對(duì)定位 /*top: 50px;*/ /*left: 50px;*/ } .small{ position: absolute; background-color: cadetblue; width: 50px; height: 50px; top: 10px; left: 10px; } </style> </head> <body> <div class="big"> <div class="small"></div> </div> </body>
image.png
- 當(dāng)一個(gè)盒子絕對(duì)定位之后不能使用margin: 0 auto;讓盒子自身居中
如果想讓過(guò)一個(gè)絕對(duì)定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素寬度一半px;
3.相對(duì)定位
- position:relative;
- 特點(diǎn)
- 位置從自身定位前在標(biāo)準(zhǔn)流中的位置出發(fā)
- 還占據(jù)原來(lái)的位置
- 父元素相對(duì)定位，子元素絕對(duì)定位
- 開(kāi)發(fā)中一般采用父元素使用相對(duì)定位子元素使用絕對(duì)定位配合使用進(jìn)行定位
4.固定定位
- position:fixed;
- 特點(diǎn)：
- 固定定位之后，不占據(jù)原來(lái)的位置（脫標(biāo)）
- 元素使用固定定位之后，位置從瀏覽器出發(fā)。
- 元素使用固定定位之后，會(huì)轉(zhuǎn)化為行內(nèi)塊（不推薦，推薦使用display:inline-block;）
5.z-index屬性
- 用于指定定位的元素的覆蓋關(guān)系
- 定位元素的覆蓋關(guān)系
- 默認(rèn)情況下定位的元素一定會(huì)蓋住沒(méi)有定位的元素
- 默認(rèn)情況下寫(xiě)在后面的定位元素會(huì)蓋住前面的定位元素
- 默認(rèn)情況下所有元素的z-index值都是0, 如果設(shè)置了元素的z-index值, 那么誰(shuí)比較大誰(shuí)就顯示在前面
- 定位元素的從父現(xiàn)象
- 父元素沒(méi)有z-index值, 那么子元素誰(shuí)的z-index大誰(shuí)蓋住誰(shuí)
- 父元素z-index值不一樣, 那么父元素誰(shuí)的z-index大誰(shuí)蓋住誰(shuí)
6.精靈圖
- 全稱CSS Sprite,很多網(wǎng)頁(yè)中的小圖標(biāo)組成的一張圖
- 通過(guò)background-position移動(dòng)圖片并截取所需部分
sprite.png
<style>
.box{
width: 50px;
height: 50px;
background-image: url(images/sprite.png);
background-position: -50px -50px;
}
</style>
