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