CSS 如何讓文字在圖片上方？
當我們需要在頁面中顯示一張圖片并在其上方添加文字時，一般會考慮如何讓文字不會擋住圖片。這時候，就可以使用 CSS **定位** 的方法，讓文字在圖片上方顯示。
1. 首先，在 HTML 中需要先將圖片和文字都以合適的方式嵌套到一起，例如使用 `div` 元素：
```html
```
2. 接下來，在 CSS 中定義 `container` div 元素的樣式，并將 `img` 元素的樣式設置為`display: block` 以便在 `container` div 中方便進行位置調整：
```css
.container {
position: relative;
}
img {
display: block;
}
```
3. 然后在 CSS 中定義 `p` 元素的樣式，并將 `position` 設置為 `absolute`，再結合 `top` 和 `left` 屬性來調整其顯示位置。例如，如果想讓文字居中顯示在圖片上方，可以這樣設置樣式：
```css
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center; /* 文字居中對齊 */
width: 100%; /* 寬度占滿整個容器 */
}
```
4. 最后，將 `pre` 元素應用到需要展示代碼的區域。例如：
```html```
```css
.code {
background-color: #f5f5f5; /* 背景色 */
padding: 1rem;
overflow-x: auto; /* 橫向滾動條 */
font-size: 14px;
line-height: 1.5;
border-radius: 4px;
margin-top: 1rem;
}
pre {
margin: 0;
}
```
通過如上的方式，就可以輕松地在頁面中實現文字在圖片上方的效果，同時使用 `pre` 元素展示代碼，更加美觀易讀。
This is a sample text.
// display code here