江西多乐彩分析

div css絕對定位布局案例不規律業務流程CSS布局實例，position布局實例position:absolute，position:relative絕對定位實例布局。關于業務流程不規律布局css div布局實例，采用絕對定位position實現布局。

一般不規律的布局比如此業務流程布局，我們采用css position絕對定位布局可以非常簡單的來實現此網頁布局。

采用div css絕對定位業務流程布局實例圖

一、為什么采用css絕對定位 - TOP

此案例如果通過普通float浮動定位很難實現，而且會浪費很多代碼，可能通過float:left和float:right浮動比較復雜。所以對于這種不規律的DIV布局，建議采用position css絕對定位布局，非常簡單。只需要在ps軟件中測量出子級（服務定義、卡種定義、結算方式定義、結算成功、銷售開單、會員卡辦理）在外層div定位位置（left、right、top、bottom）即可布局出此實例。

二、使用關鍵css樣式單詞及解釋 - TOP

1、position:relative
父級賦予其定位

2、position:absolute
子級設置其樣式，相等于父級設置定位樣式

3、left、top、right、bottom
對子級設置定位在父級位置

在css模塊實例布局代碼中給大家詳細介紹作用用法。

相關教程：
1、css position
2、left、top、right、bottom
3、另外一個CSS絕對定位實例

三、DIV絕對定位案例代碼及解釋 - TOP

1、實例對應html代碼與解釋

<div id="divcss5"> 
    <div class="title"><img src="images/tit.gif" alt="業務流程" /></div> 
    <div class="divcss5"> 
        <div class="no no1"><a href="#" title="服務定義">服務定義</a></div> 
        <div class="no no2"><a href="#" title="卡種定義">卡種定義</a></div> 
        <div class="no no3"><a href="#" title="結算方式定義">結算方式定義</a></div> 
        <div class="no no4"><a href="#" title="結算成功">結算成功</a></div> 
        <div class="no no5"><a href="#" title="銷售開單">銷售開單</a></div> 
       <div class="no no6"><a href="#" title="會員卡辦理">會員卡辦理</a></div> 
    </div> 
</div>

首先我們設置一個“id="divcss5"”盒子里放一個裝標題盒子（<div class="title">）和一個裝流程內容的盒子（<div class="divcss5">），而其它的“<div class="no no1">”這些是具體裝流程圖內容。

本實例主要內容是“<div class="divcss5">”內的布局，首先我們將業務流程內容作為“<div class="divcss5">”背景，然后再分別使用六個子div盒子分別裝具體業務流程內容。

2、實例對應CSS代碼與解釋

#divcss5{ margin:0 auto; width:862px} 
/*定位最外層盒子寬度與布局居中（margin:0 auto css布局居中功能）*/ 
#divcss5 .title{ padding-bottom:24px;} 
/*設置裝業務標題盒子距離下一個盒子距離為24px*/ 
#divcss5 .divcss5{ position:relative; background:url(process.gif) no-repeat 0 0; height:361px;} 
/*position:relative聲明絕對定位父級，設置高度361px，寬度默認繼承其父級862寬度，
將整個流程圖作為圖片設置為背景*/ 
.no{ position:absolute;width:211px; height:49px} 
/*公用六個內容class設置寬度、高度、定位子級*/ 
.no a{ display:block; width:100%; height:100%; text-indent:-9999px} 
/*隱藏超鏈接內文字功能*/ 
.no1{ left:50px; top:0} 
/*定位第一個“服務定義”內容距離父級左邊距離50px、距離上為0距離*/ 
.no2{ left:18px; top:137px} 
/*定位第二個“卡種定義”內容距離父級左邊距離18px、距離上為137px距離*/ 
.no3{ left:60px; top:268px} 
/*定位第三個“結算方式定義”內容距離父級左邊距離60px、距離上為268px距離*/ 
.no4{ right:49px; top:0} 
/*定位第四個“結算成功”內容距離父級右邊距離49px、距離上為0距離*/ 
.no5{ right:17px; top:138px} 
/*定位第五個“銷售開單”內容距離父級右邊距離17px、距離上為138px距離*/ 
.no6{ right:59px; top:268px} 
/*定位第六個“會員卡辦理”內容距離父級右邊距離59px、距離上為268px距離*/