首頁 > web前端 > css教學 > css的絕對定位與相對定位

css的絕對定位與相對定位

高洛峰
發布: 2017-02-04 16:37:24
原創
1510 人瀏覽過

相對定位

父級有代碼:

.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中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板