在html中怎么設置div懸??？懸浮怎么設置？

猿友 2021-06-01 10:10:26 瀏覽數(shù) (10344)

反饋

我們在學習 HTML 中的盒子之后，我們就會想怎么樣才可以把 A 盒子讓 B 盒子覆蓋在 A 盒子之上呢？這個的話就涉及到我們的懸浮設置了，那么今天我們就來說說“在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> 清平調(diào)·其一</p>
			<p>李白 〔唐代〕</p>
			<p>云想衣裳花想容，春風拂檻露華濃。</p>
			<p>若非群玉山頭見，會向瑤臺月下逢。</p>
		</div>
		<div class="float_box_discover">
			顯示懸浮盒子的位置
		</div>
	</body>
</html>

沒有設置浮動位置

在代碼塊中，我們使用了一個內(nèi)聯(lián)式的一個CSS的樣式，有關于樣式知識不清楚地小伙伴們，可以在HTML引入CSS常見方法及解析中進行一個復習和了解噢！

2.在完成上面這個創(chuàng)建步驟后，我們也看到了一個效果圖，那么怎么設置浮動的話這步就可以看到效果了啦！我們根據(jù)上面所提供的代碼中加入一個 ?position ?元素，在這個元素中在加入一個 ?absolute ?用來設置浮動的盒子的位置，對于絕對定位和相對定位不了解的小伙伴可以在定位用法解析說明中進行學習和了解噢，代碼如下：

	.float_box_discover {
				background-color: aqua;
				width: 150px;			
				text-align: center;
				position: absolute;
				top: 55px;
				left: 55px;
			}

我們從這個 CSS代碼中可以看到我們在使用 position 這個元素之后還設置了這個盒子的上邊距和左邊邊距，那么我們來看看最后的效果圖吧！

設置浮動位置