沒(méi)有什么問(wèn)題是用一個(gè)div解決不了的宣脉，如果有车柠，那就用兩個(gè)。
項(xiàng)目終于提測(cè)了塑猖，耗時(shí)3周竹祷，經(jīng)歷了從前端小白到前端小菜的過(guò)程。在開(kāi)發(fā)過(guò)程中羊苟，踩到了很多坑塑陵，但是通過(guò)萬(wàn)能的baidu和google，這些坑都被填平了蜡励，盡管填坑的材料可能不是最優(yōu)×罨ǎ現(xiàn)在紀(jì)錄一下踩到的坑和填坑的過(guò)程。
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上了漫蛔。通過(guò)調(diào)整over的top屬性，即可調(diào)整over在under上的位置旧蛾。
- 但是此時(shí)有一個(gè)問(wèn)題莽龟，如果要將over固定在under底部，要設(shè)置top: 20px;或者bottom: -20px;才行锨天。因?yàn)榇藭r(shí)under是絕對(duì)位置毯盈，over是相對(duì)位置，此時(shí)的top和bottom均為over自身的頂部的底部病袄。如果under的高度是不固定的搂赋，此時(shí)over的位置就很難確定了。接下來(lái)我們就解決這個(gè)問(wèn)題益缠。
3脑奠、沒(méi)有什么問(wèn)題是一個(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
- 通過(guò)使用一個(gè)父div將under和over包括起來(lái)幅慌，并將父div設(shè)置為relative宋欺，over為absolute。此時(shí)over的位置即是相對(duì)父元素的位置胰伍。
好了齿诞。今天就紀(jì)錄到這里，如果找到更好的方法會(huì)繼續(xù)補(bǔ)充骂租。加油掌挚！新的一周已經(jīng)開(kāi)始！
