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