溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了html中如何設置div懸浮的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇html中如何設置div懸浮文章都會有所收獲，下面我們一起來看看吧。
1.那么首先呢，我們要來新建一個新的 .html 文件，在文件中我們插入兩個 div 標簽方便等等我們來對比看看是怎么個浮動的方法呢！那么接下來就是我們的代碼部分了，在各個 div 標簽中加入我們的類選擇器，有不懂的可以小伙伴們可以在CSS選擇器中進行學習和回顧哦！代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>懸浮設置</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> 清平調·其一</p>
<p>李白 〔唐代〕</p>
<p>云想衣裳花想容，春風拂檻露華濃。</p>
<p>若非群玉山頭見，會向瑤臺月下逢。</p>
</div>
<div class="float_box_discover">
顯示懸浮盒子的位置
</div>
</body>
</html>在代碼塊中，我們使用了一個內聯式的一個CSS的樣式，有關于樣式知識不清楚地小伙伴們，可以在HTML引入CSS常見方法及解析中進行一個復習和了解噢！
2.在完成上面這個創建步驟后，我們也看到了一個效果圖，那么怎么設置浮動的話這步就可以看到效果了啦！我們根據上面所提供的代碼中加入一個 position 元素，在這個元素中在加入一個 absolute 用來設置浮動的盒子的位置，對于絕對定位和相對定位不了解的小伙伴可以在定位用法解析說明中進行學習和了解噢，代碼如下：
.float_box_discover {
background-color: aqua;
width: 150px;
text-align: center;
position: absolute;
top: 55px;
left: 55px;
}我們從這個 CSS代碼中可以看到我們在使用 position 這個元素之后 還設置了這個盒子的上邊距和左邊邊距。
關于“html中如何設置div懸浮”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“html中如何設置div懸浮”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
