css的絕對定位與相對定位

相對定位

父級有代碼：

.picbox{
    position: relative;
    width: 400px;
    height: 250px;
    margin: 0 auto ;

也就是程式碼中的position: relative;時，子級的定位可以相對父級而決定位子。

子級的代碼：

子層級的程式碼中必須有 position: absolute;這段程式碼

css原碼展示：

.picbox{
    position: relative;
    width: 400px;
    height: 300px;
    margin: 0 auto;

}
.picbox span{
    position: absolute;
    top:10px;
    bottom: 10px;
    color: #f3eded;
}

位元如何定位：

top:10px;
bottom: 10px;

由此代碼決定他們相對父級的位子

Div的透明度：

.ttbg{
    position: absolute;
    left: 0;
    bottom: 0%;
    width: 400px;
    height: 40px;
    background: red;
    opacity: 0.1;

用css樣式中的代碼opacity: 0.1;表示顏色的透明度

圖片

css3中的表示方法

background:rgba(0,0,0,0.5)

解析

rgb:指的是ps中代碼顏色
a:指的是頻道的透明度

css絕對定位

代碼：

相對於整個網頁的定位

position:absolute

絕對定位：相對於父級定位

.picbox{
    position: relative;
    width: 400px;
    height: 300px;
    margin: 0 auto;

更多css的絕對定位與相對定位相關文章請關注PHP中文網！