1、
2、HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><!--meta標記定義的字元集是支援中文的gb2312--><meta http-equiv=content-type content="text/html; charset=gb2312"><!--連結外部CSS樣式 --><link rel="stylesheet" href="captions-2a.css" type="text/css" media="screen" /><title>圖片解說文字</title><!--[if lt IE 7]><style type="text/css">.captioned_photo p {background: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='images/caption-white.png');}</style><![endif]--></head><body> <div class="captioned_photo"> <img src="images/captions-2.jpg" alt="Cat Vase!" /> <p><span><strong>The Cat Vase:</strong> The cats are cute, white, with gold-trimmed ears and tails.</span></p> </div></body></html>
3、CSS代碼
/*CSS STYLE SHEET FOR [captions-2a.html] Created by [Serein_Chan]Email: [Serein_Chan@foxmail.com]Author Blog:[http://blog.csdn.net/cxwen78]*//*注釋 *//*body的樣式 */body {margin: 0;padding: 0;background-color: #f0ffff;font: 62.5% Verdana, sans-serif;text-align: center;color: #4d4d4d;}p {margin: 0;padding: 0 0 1em 0;}.captioned_photo {position: absolute;/*設定DIV塊的定位類型，使得其所包含的子項目P進行絕對位置時能相對於DIV塊來定位而不是HTML元素*/width: 240px;margin: .5em 0 .5em 1.25em;padding: 0;border: 3px double #4d4d4d;line-height: 1em;text-align: left;}.captioned_photo p {position: absolute;/*絕對位置相對於最近的已定位的祖先元素*/bottom: 0;left: 0;width: 100%;margin: 0;padding: 0;background: url(images/caption-white.png);/*使用半透明的圖片作背景實現透明層疊效果*/font: .9em Verdana, sans-serif;letter-spacing:.05em;/*設定字元間的空白*/color: #0000ff;}.captioned_photo p span {display: block;padding: .75em;}.captioned_photo img {margin: 0;padding: 0;display: block;}
4、CSS代碼解讀之CSS定位(position)
CSS 定位機制CSS 有三種基本的定位機制：普通流、浮動和絕對位置。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。
CSS position 屬性
通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框產生的方式。
position 屬性值的含義：
提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
CSS 相對定位
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 像素的地方。如果 left 設定為 30 像素，那麼會在元素左邊建立 30 像素的空間，也就是將元素向右移動。
CSS 絕對位置設定為絕對位置的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。
絕對位置使元素的位置與文檔流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。絕對位置的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
總結：相對定位是“相對於”元素在文檔中的初始位置，而絕對位置是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。根據使用者代理程式的不同，最初的包含塊可能是畫布或 HTML 元素。
關於本例子中標題浮在圖片上方的實現說明：這其中的關鍵是通過巧妙的設定說明文本段絡P相對與DIV塊的位置來實現的，其中透明的效果是給說明文本段落設定了透明的背景圖片，產生通透的效果。.captioned_photo {
position: absolute;/*設定DIV塊的定位類型，使得其所包含的子項目P進行絕對位置時能相對於DIV塊來定位而不是HTML元素*/
...
}
.captioned_photo p {
position: absolute; /*絕對位置相對於最近的已定位的祖先元素，即DIV塊*/
bottom: 0; /*定義了定位元素下外邊距邊界與其包含塊下邊界之間的位移。*/
left: 0; /*定義了定位元素左外邊距邊界與其包含塊左邊界之間的位移。 */
...
}
如此設定後，標題段落就會處於圖片的上一層，並且緊貼左下邊界對齊。
參考：《The Art & Science of CSS》
W3C School：http://www.w3school.com.cn/css/css_positioning.asp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
