CSS的position屬性在DIV層中的應用
發(fā)布時間：2013-10-09 15:09:43 作者：佚名 
我要評論
我要評論定位的話，父DIV設置position:relative后，子DIV的position:absolute就會相對父DIV作絕對定位，接下來為大家介紹下CSS的position屬性在DIV層中的應用
原來只明白position:relative是相對定位，position:absolute 是絕對定位；
經(jīng)常看到圖片輪播的下方有個半透明背景的文字描述。我現(xiàn)在要做這樣一個效果，因為不是輪播，所以沒去找插件，想自己寫。
半透明背景可以設置屬性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;}
效果：
經(jīng)常看到圖片輪播的下方有個半透明背景的文字描述。我現(xiàn)在要做這樣一個效果，因為不是輪播，所以沒去找插件，想自己寫。
半透明背景可以設置屬性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;}
效果：
相關文章
- 這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對比,需要的朋友可以參考下2015-11-06
- positon有4個屬性:static relative absolute fixed，我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又2014-11-28
- 對于Position、Float我們在平時使用上可以說是使用頻率非常高的兩個CSS屬性，對于這兩個屬性的使用上面可能大多數(shù)人存在一些模糊與不清晰的地方。本文主要對這兩個屬性使用2014-06-14
- position屬性主要有四種屬性值，任何元素的默認position的屬性值均是static,靜態(tài)。這節(jié)課主要講講relative以及absolute，感興趣的朋友可以了解下2013-12-09
- 當一個div想要定位時，我們第一反應是position屬性，而position屬性除了默認值外，還有absolute,relative和fixed，下面有個不錯的示例，不懂的朋友可以參考下2013-11-11
- CSS定位中Position是必不可少的，其有四個屬性static、relative、absolute、fixed，下面為大家詳細介紹下，這個四個屬性的使用場合，感興趣的朋友不要錯過2013-10-16
CSS樣式position屬性的一個小實例:z方向三層布局分析
使用CSS樣式中的position屬性實現(xiàn)z方向三層布局效果，本文甚是疑惑，于是乎搜集整理一番，曬出代碼和大家分享一下2012-12-07- CSS position屬性使用說明，需要的朋友可以參考下。2009-11-04
- 網(wǎng)頁制作Webjx文章簡介：position屬性可以讓你讓你隨意控制一個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在瀏覽器的左上角.即使出現(xiàn)2009-04-02
- position有五個屬性： static | relative | absolute | fixed | inherit，也許你看到這個標題覺得很簡單，確實這是一篇關于CSS中Position屬性基礎知識的文章，但是關于Pos2015-11-27