相對(duì)定位、絕對(duì)定位

準(zhǔn)備工作

           background:url('images/grass.png')

<p>將上次的土塊模型中的background換成土塊
在css塊狀結(jié)構(gòu)中換背景圖
但是將圖形放上去以后被拉升了
要使圖像像素保持不變，有一個(gè)css的background-size來限定
</p>

           background-size: contain;是限定在盒裝大小之內(nèi)

這是現(xiàn)在的效果圖

最后一步：在頂上放一朵小花

image.png

在css中寫了一朵花的樣式，然后在HTML中加入新的標(biāo)簽樣式

準(zhǔn)備工作完成

相對(duì)定位

目標(biāo)：把花移動(dòng)到第二層空白的位置
相對(duì)定位：定位系統(tǒng)的參照坐標(biāo)系和坐標(biāo)點(diǎn)
相對(duì)于自己之前本應(yīng)該在的位置的偏移量

左上角

距離頂部偏移64px，距離左側(cè)偏移128px

                    position: relative;
                    left: 64px;
                    top:64px;

偏移后的位置

之前的空白占位不會(huì)消失

絕對(duì)定位

新增了一個(gè)小黃花的樣式，將在兩個(gè)土塊之間，用絕對(duì)定位看看會(huì)發(fā)生什么把

                   position: absolute;

在css中加入一行代碼后小黃花的占位消失了

image.png

原始

改成abusolute占位以后原有的占位就不存在了

偏移之后發(fā)現(xiàn)小黃花的紅點(diǎn)占位并不在空白的位置，說明便宜還是有問題的

問題的原因是yellow-flower的父級(jí)沒有定義是absolute還是relative

定位父級(jí)bg后

出現(xiàn)剛剛偏差的原因：當(dāng)上次沒有定義是絕對(duì)還是相對(duì)的時(shí)候就會(huì)往上追溯，剛才BG的父級(jí)是body，由于默認(rèn)的margin不為0，就有了8px的偏差

基于定位的居中

                      body{ margin:0;
                            background:url('images/brick.jpg');
                            background-size:150px 150px;}

居中定位之前的準(zhǔn)備工作

加一個(gè)畫框和一個(gè)背景墻

用絕對(duì)定位的百分百
內(nèi)層元素處于外層元素的50% 的位置

要先把定位方式改成absolute

               position: absolute;
               left:50%;
               top:50%;

css的缺陷

用transform屬性修改定位點(diǎn)的位置

              transform: translate(-50%,-50%);

侯爵老師的小講解