免費(fèi)AI編程助手
我們在學(xué)習(xí) HTML 中的盒子之后，我們就會想怎么樣才可以把 A 盒子讓 B 盒子覆蓋在 A 盒子之上呢？這個的話就涉及到我們的懸浮設(shè)置了，那么今天我們就來說說“在html中怎么設(shè)置div懸浮“和}“懸浮怎么設(shè)置“吧！
1.那么首先呢，我們要來新建一個新的 .html 文件，在文件中我們插入兩個 ?div ?標(biāo)簽方便等等我們來對比看看是怎么個浮動的方法呢！那么接下來就是我們的代碼部分了，在各個 ?div ?標(biāo)簽中加入我們的類選擇器，有不懂的可以小伙伴們可以在CSS選擇器中進(jìn)行學(xué)習(xí)和回顧哦！代碼截圖如下：
<html>
<head>
<meta charset="utf-8">
<title>懸浮設(shè)置</title>
<style>
.float_box_seting {
width: 500px;
height: 150px;
background-color: antiquewhite; }
div p {
text-align: center; }
.float_box_discover {
background-color: aqua;
width: 150px; }
</style>
</head>
<body>
<div class="float_box_seting">
<p> 清平調(diào)·其一</p>
<p>李白 〔唐代〕</p>
<p>云想衣裳花想容，春風(fēng)拂檻露華濃。</p>
<p>若非群玉山頭見，會向瑤臺月下逢。</p>
</div>
<div class="float_box_discover">
顯示懸浮盒子的位置
</div>
</body>
</html>
在代碼塊中，我們使用了一個內(nèi)聯(lián)式的一個CSS的樣式，有關(guān)于樣式知識不清楚地小伙伴們，可以在HTML引入CSS常見方法及解析中進(jìn)行一個復(fù)習(xí)和了解噢！
2.在完成上面這個創(chuàng)建步驟后，我們也看到了一個效果圖，那么怎么設(shè)置浮動的話這步就可以看到效果了啦！我們根據(jù)上面所提供的代碼中加入一個 ?position ?元素，在這個元素中在加入一個 ?absolute ?用來設(shè)置浮動的盒子的位置，對于絕對定位和相對定位不了解的小伙伴可以在定位用法解析說明中進(jìn)行學(xué)習(xí)和了解噢，代碼如下：
.float_box_discover {
background-color: aqua;
width: 150px;
text-align: center;
position: absolute;
top: 55px;
left: 55px;
}
我們從這個 CSS代碼中可以看到我們在使用 position 這個元素之后 還設(shè)置了這個盒子的上邊距和左邊邊距，那么我們來看看最后的效果圖吧！
在效果圖中我們可以看到，藍(lán)色盒子已經(jīng)懸浮在第一個盒子"李白 〔唐代〕"這個文本旁邊了，說明我們已經(jīng)設(shè)置成功了。
小結(jié)：
那么這就是今天的一個有關(guān)于”在html中怎么設(shè)置div懸?。俊焙汀皯腋≡趺丛O(shè)置？”的一個方法，當(dāng)然如果你有更好的一個方法的話也可以和大家一起來分享討論噢！希望這些建議對你有所幫助，更多有關(guān)于HTML的知識和學(xué)習(xí)內(nèi)容我們都可以在Web前端入門掃盲課程中進(jìn)行學(xué)習(xí)噢。
