沒有什么問題是用一個(gè)div解決不了的，如果有，那就用兩個(gè)。
項(xiàng)目終于提測了，耗時(shí)3周，經(jīng)歷了從前端小白到前端小菜的過程。在開發(fā)過程中，踩到了很多坑，但是通過萬能的baidu和google，這些坑都被填平了，盡管填坑的材料可能不是最優(yōu)。現(xiàn)在紀(jì)錄一下踩到的坑和填坑的過程。
Requirement：
實(shí)現(xiàn)一個(gè)在圖片底部用陰影展示title的樣式。如果把圖片和標(biāo)題各看作一個(gè)div，那要實(shí)現(xiàn)的就是讓一個(gè)div懸浮（或重疊）在另一個(gè)div上面。
Implementation：
1、按順序輸入的div是從上到下排列的。
html:
<div class = "under"></div>
<div class = "over">
<p>title</p>
</div>
css:
.under {width: 100px; height: 50px; background: #bebebe;}
.over {width: 100px; height: 30px; background: black; color: white;}
效果：
Paste_Image.png
- 上方灰色區(qū)域?yàn)閡nder，下方黑色區(qū)域?yàn)閛ver，按順序排列。
2、為了讓over懸浮在under上，要使用到position屬性。
html不變。
css:
.under {width: 100px; height: 50px; background: #bebebe; position: absolute;}
.over {width: 100px; height: 30px; background: black; color: white; position: relative;}
效果：
Paste_Image.png
- 此時(shí)over已經(jīng)懸浮在under上了。通過調(diào)整over的top屬性，即可調(diào)整over在under上的位置。
- 但是此時(shí)有一個(gè)問題，如果要將over固定在under底部，要設(shè)置top: 20px;或者bottom: -20px;才行。因?yàn)榇藭r(shí)under是絕對位置，over是相對位置，此時(shí)的top和bottom均為over自身的頂部的底部。如果under的高度是不固定的，此時(shí)over的位置就很難確定了。接下來我們就解決這個(gè)問題。
3、沒有什么問題是一個(gè)div解決不了的。
html:
<div class="parent">
<div class="first"></div>
<div class="second">
<p>title</p>
</div>
</div>
css:
.parent {position: relative;}
.under {width: 100px; height: 50px; background: #bebebe;}
.over {width: 100px; height: 30px; background: black; color: white; position: absolute; bottom: 0;}
效果：
Paste_Image.png
- 通過使用一個(gè)父div將under和over包括起來，并將父div設(shè)置為relative，over為absolute。此時(shí)over的位置即是相對父元素的位置。
好了。今天就紀(jì)錄到這里，如果找到更好的方法會繼續(xù)補(bǔ)充。加油！新的一周已經(jīng)開始！
