請教一下這題，有人知道怎麼做到圖片放在字的上方嗎？小弟試了好久，沒招了QQ
<section class='sale-item'>
<p>「TQC+ 電腦繪圖設計認證 Illustrator CS6」，係為TQC+ 視傳設計領
域之電腦繪圖設計認證能力鑑定，以實務操作方式進行認證，評核符合企業需求的新時代
專業設計人才。亦為考核「平面設計專業人員」與「Flash動畫設計專業人員」必備專業
技能之一。</p>
<img src='images/AEY028900S.jpg'
alt='TQC+ 電腦繪圖設計認證 Illustrator CS6'>
</section>
‧方法要使用CSS
#deals {
display: flex;
}
.sale-item {
word-wrap: break-word;
word-break: break-all;
width:200px;
margin:10px;
padding:5px;
background-color:#b7b1b1;
border-radius:10px;
}
.sale-item > img {
display: block;
margin:0 auto;
box-shadow:3px 2px 5px #808080;
}
※ 引述《hans5300609 (屏商院資工系xD)》之銘言：
: 主辦單位：
: 台北市電腦商業同業公會
: 鴻海精密工業股份有限公司
: 協辦單位：財團法人電腦技能基金會(TQC)
: http://www.tqcplus.org.tw/ict50/method.aspx
: 選秀試題：
: 「HTML5技能指標WPDSS (Webpage Program Design Skill Standards)」進行選秀評量。
: 規範內容與範例試題下載：http://www.tqcplus.org.tw/ict50/examSample.aspx
: 鴻海找TQC辦這個到底是找人才還是打廣告呢?
: 還是說跟鴻海加入4G電信業有關??
: 上面還有沒答案的範例試題
: 不過大部分我都不會(掩面
: 順便問一下ICT產業是什麼?

下面css是給死的還是可以自己打？可以自己打的話，p跟img的position都設absolute然後一個設img設top:0，p設bottom:0應該可以但section應該要設死高

img設 transform:translate(0px,-25px) 就會壓在字上了

float the img

其實這題是用flex box，只要img設定order:-1就可以了解答by講師 (學校請人來準備考這個...但應該無用)DOFI Lab 羅老師 這樣www

absolute雖然可以移動，但圖移上去後，下方空間不會縮試出來了.sale-item設display:flex;flex-direction:column.sale-item > img設 order:-1;