組織架構圖在企業或組織內用于展示不同部門之間的層級和關系，是一種非常常見的信息展示方式。在html中，我們可以使用CSS來實現組織架構圖的繪制。

首先，我們需要準備一個html的骨架，包括一個容器元素和多個子元素。每個子元素表示一個部門或崗位，可以嵌套其他子元素構建層級關系。

<div class="container">
<div class="department">
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
</div>
<div class="department">
<div class="position"></div>
<div class="position"></div>
</div>
<div class="department">
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
</div>
</div>

接下來，我們可以使用CSS對元素進行樣式設置，實現組織架構圖的繪制。首先，我們需要將容器元素設置為相對定位，以便可以將子元素進行絕對定位。

.container {
position: relative;
/* 其他樣式設置 */
}

接著，我們可以對每個部門元素進行樣式設置，包括寬度、高度、邊框、圓角等。將每個部門元素設置為相對定位，以便可以進行子元素的絕對定位。

.department {
position: relative;
width: xx;
height: xx;
border: 1px solid #000;
border-radius: xx;
/* 其他樣式設置 */
}

接著，我們可以對每個崗位元素進行樣式設置。每個崗位元素可以通過在部門元素內的左右上下位置的絕對定位來實現層級關系。可以為每個崗位元素設置一個箭頭樣式，用于表示下級部門。

.position {
position: absolute;
left: xx;
top: xx;
width: xx;
height: xx;
border: 1px solid #000;
border-radius: xx;
/* 其他樣式設置 */
}
/* 箭頭樣式 */
.position::after {
content: "";
display: block;
width: xx;
height: xx;
position: absolute;
top: xx;
left: xx;
border: xx solid transparent;
border-left: xx solid #000;
/* 其他樣式設置 */
}

最后，我們可以通過CSS的偽元素來為崗位元素設置一個名字標簽。可以將每個名字標簽設置為絕對定位，與崗位元素進行相對定位。

.position::before {
content: "崗位名稱";
display: block;
position: absolute;
top: xx;
left: xx;
/* 其他樣式設置 */
}

通過以上的CSS樣式設置，我們可以輕松繪制出一張組織架構圖，展示部門之間的層級關系和崗位名稱，使得信息更加清晰易懂。