div的位置與排列 | css位置
一、position 相對定位與絕對定位的應用 上面圖形的原始碼是:
一、position 相對定位與絕對定位的應用 上面圖形的原始碼是:
上面圖形的原始碼是:
<div style="border: 1px solid; width: 200px; height: 120px;"> <div style="color: blue;">Manifold</div> </div>問題來了,我想把 Manifold 移到最右邊,要怎麼做?
調整 CSS 提供的 position 屬性,可以達到我們的要求。 先把黑色框框 (Box1) 的 position 屬性設成 relative, 這會使得 Box1 裡面元素的位置都是相對於 Box1。 再把 Manifold 的 position 屬性設成 absolute, 這使得我們可以藉由調整 Manifold 的 top, left, right, bottom 屬性來控制 Manifold 的位置。 至於要靠右的話,把 right 設成 0。 修改之後的原始碼如下:
<div style="position: relative; border: 1px solid; width: 200px; height: 120px;"> <div style="position: absolute; color: blue; right: 0;"> Manifold</div> </div>圖形如下:
如果想把 Manifold 移到右下角要怎麼做呢?聰明如你,應該知道答案了吧,沒錯,就是:
<div style="position: relative; border: 1px solid; width: 200px; height: 120px;"> <div style="position:...