DIV CSS 佈局教程網

定位的話，父DIV設置position:relative後，子DIV的position:absolute就會相對父DIV作絕對定位，接下來為大家介紹下CSS的position屬性在DIV層中的應用

 

原來只明白position:relative是相對定位，position:absolute 是絕對定位；

經常看到圖片輪播的下方有個半透明背景的文字描述。我現在要做這樣一個效果，因為不是輪播，所以沒去找插件，想自己寫。

半透明背景可以設置屬性background: rgba(0, 0, 0, 0.15);

定位的話，父DIV設置position:relative後，子DIV的position:absolute就會相對父DIV作絕對定位。這樣就很方便了。

復制代碼 代碼如下:
.banner{margin:20px;height:204px;position:relative;overflow:hidden}
.banner .content{color:#FFF;font-size:24px;line-height:30px;font-weight:800;background: rgba(0, 0, 0, 0.15);position:absolute;left:0;right:0;bottom:0;}

效果：