使用CSS定位HTML元素的實(shí)現(xiàn)方法
我要評(píng)論在頁面上定位內(nèi)容時(shí)，可以使用一些屬性來幫助您操縱元素的位置。本文將向您展示一些使用 CSSposition 屬性包含不同定位元素類型的示例。要在元素上使用定位，您必須首先聲明它的 position property，它指定用于元素的定位方法的類型。使用 position 屬性值，使用 top、bottom、left 和 right 屬性定位元素。它們的工作方式也不同，具體取決于它們的位置值。
定位值有五種類型：
- 靜止的
- 相對(duì)的
- 固定的
- 絕對(duì)
- 黏
靜止的
HTML元素默認(rèn)是靜態(tài)定位的，元素按照文檔的正常流程定位；靜態(tài)定位元素不受 top、bottom、left 和 right 屬性的影響。具有位置的元素：靜態(tài)；沒有以任何特殊方式定位
用于將位置設(shè)置為靜態(tài)的 CSS 是：
position: static;
接下來是使用靜態(tài)位置值的示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: WHITE;
font: Helvetica;
width: 420px;
}
.square-set,
.square {
border-radius: 15px;
}
.square-set {
background: darkgrey;
}
.square {
position: static;
background: Green;
height: 70px;
line-height: 40px;
text-align: center;
width: 90px;
}
</style>
</head>
<body>
<div class="square-set">
<figure class="square square-1">SQUARE 1</figure>
<figure class="square square-2">SQUARE 2</figure>
<figure class="square square-3">SQUARE 3</figure>
<figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>
相對(duì)的
元素根據(jù)文檔的正常流程定位，相對(duì)于其正常位置進(jìn)行定位，然后 根據(jù)頂部、右側(cè)、底部和左側(cè)的值相 對(duì)于自身進(jìn)行偏移。偏移量不影響任何其他元素的位置；因此，頁面布局中為元素指定的空間與位置是靜態(tài)的相同。設(shè)置相對(duì)定位元素的 top、right、bottom 和 left 屬性將導(dǎo)致它被調(diào)整遠(yuǎn)離其正常位置。其他內(nèi)容不會(huì)被調(diào)整以適應(yīng)元素留下的任何間隙。
用于將位置設(shè)置為相對(duì)的 CSS 是：
position: relative;
下面的示例使用相對(duì)位置值：
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: white;
font: Helvetica ;
width: 420px;
}
.square-set,
.square {
border-radius: 15px;
}
.square-set {
background: darkgrey;
}
.square {
background: green;
height: 70px;
line-height: 40px;
position: relative;
text-align: center;
width: 80px;
}
.square-1 {
top: 15px;
}
.square-2 {
left: 50px;
}
.square-3 {
bottom: -23px;
right: 30px;
}
</style>
</head>
<body>
<div class="square-set">
<figure class="square square-1">SQUARE 1</figure>
<figure class="square square-2">SQUARE 2</figure>
<figure class="square square-3">SQUARE 3</figure>
<figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>
絕對(duì)
該元素將從正常的文檔流中移除，并且在頁面布局中，不會(huì)為該元素創(chuàng)建空間。元素相對(duì)于最近的定位祖先（如果有的話）定位；否則，它相對(duì)于初始包含塊放置，其最終位置由頂部、右側(cè)、底部和左側(cè)的值確定。
用于將位置設(shè)置為絕對(duì)的 CSS 是：
position: absolute;
一個(gè)元素position: absolute; 相對(duì)于最近定位的祖先進(jìn)行定位。如果絕對(duì)定位元素沒有定位的祖先，它使用文檔正文，并與頁面滾動(dòng)一起移動(dòng)。“定位”元素的位置不是static.
下一個(gè)例子強(qiáng)調(diào)元素的絕對(duì)位置：
<!DOCTYPE html>
<html>
<head>
<style>
.square-set {
color: WHITE;
background: darkgrey;
height: 200px;
position: relative;
border-radius: 15px;
font: Helvetica ;
width: 420px;
}
.square {
background: green;
height: 80px;
position: absolute;
width: 80px;
border-radius: 15px;
line-height: 60px;
}
.square-1 {
top: 10%;
left: 6%;
}
.square-2 {
top: 5;
right: -20px;
}
.square-3 {
bottom: -15px;
right: 40px;
}
.square-4 {
bottom: 0;
}
</style>
</head>
<body>
<div class="square-set">
<figure class="square square-1">SQUARE 1</figure>
<figure class="square square-2">SQUARE 2</figure>
<figure class="square square-3">SQUARE 3</figure>
<figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>
固定的
從正常文檔流中刪除的元素，并且在頁面布局中，沒有為元素創(chuàng)建空間。元素相對(duì)于由視口建立的初始包含塊定位，其最終位置由值 top、right、bottom 和 left 確定。此值始終創(chuàng)建一個(gè)新的堆疊上下文。
用于將位置設(shè)置為固定的 CSS 如下所示：
position: fixed;
元素position: fixed; 相對(duì)于視口定位，這意味著即使頁面滾動(dòng)，它也始終保持在同一位置。top、right、bottom 和 left 屬性用于定位元素。
黏
元素按照文檔的正常流程定位，然后根據(jù)top、right、bottom和left的值，相對(duì)于其最接近的升序塊級(jí)進(jìn)行偏移，包括與表格相關(guān)的元素。偏移量不會(huì)影響任何其他元素的位置。
此值始終創(chuàng)建一個(gè)新的堆疊上下文。請注意，粘性元素“粘”到其最近的具有“滾動(dòng)機(jī)制”的祖先，即使該祖先不是最近的實(shí)際滾動(dòng)祖先。
用于將位置設(shè)置為粘性的 CSS 是：
position: sticky;
元素position: sticky; 的定位基于用戶的滾動(dòng)位置，relative 并fixed 根據(jù)滾動(dòng)位置在位置之間切換。
重疊元素
網(wǎng)頁上的重疊元素對(duì)于突出、宣傳和關(guān)注我們網(wǎng)頁上的重要內(nèi)容非常有用。使元素覆蓋在您的網(wǎng)站上是非常有用且非常有價(jià)值的功能設(shè)計(jì)實(shí)踐。當(dāng)元素被定位時(shí)，它們可以與其他元素重疊，所以要指定順序（什么元素應(yīng)該放在其他元素的前面或后面），我們應(yīng)該使用 z-index 屬性。具有較大堆棧順序的元素始終位于具有較低堆棧順序的元素之前。請注意，z-index 屬性僅適用于定位元素（位置：絕對(duì)、位置：相對(duì)或位置：固定）。
下一個(gè)示例顯示 z-index 屬性如何在不同的正方形上工作：
<!DOCTYPE html>
<html>
<head>
<style>
.square-set {
color: white;
background: purple;
height: 170px;
position: relative;
border-radius: 15px;
font: Helvetica;
width: 400px;
}
.square {
background: orange;
border: 4px solid goldenrod;
position: absolute;
border-radius: 15px;
height: 80px;
width: 80px;
}
.square-1 {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.square-2 {
position: absolute;
z-index: 2;
background: black;
width: 65%;
left: 60px;
top: 3em;
}
.square-3 {
position: absolute;
z-index: 3;
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="square-set">
<figure class="square square-1">SQUARE 1</figure>
<figure class="square square-2">SQUARE 2</figure>
<figure class="square square-3">SQUARE 3</figure>
</div>
</body>
</html>
在圖像上定位文本
下面的示例使用上述 CSS 定位值在圖像上覆蓋一些文本：
<!DOCTYPE html>
<html>
<head>
<style>
.module{
background:
linear-gradient{
rgba(0, 4, 5, 0.6),
rgba(2, 0, 3, 0.6)
),
url(http://www.holtz.org/Library/Images/Slideshows/Gallery/Landscapes/43098-DSC_64xx_landscape-keltern-1_wall.jpg);
background-size: cover;
width: 600px;
height: 400px;
margin: 10px 0 0 10px;
position: relative;
float: left;
}
.mid h3 {
font-family: Helvetica;
font-weight: 900;
color: white;
text-transform: uppercase;
margin: 0;
position: absolute;
top: 30%;
left: 50%;
font-size: 3rem;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="module mid">
<h3>Wild nature</h3>
</div>
</body>
</html>
結(jié)論
在本文中，我們描述并給出了 CSS 定位類型的示例，并描述了如何重疊元素并在圖像上添加一些文本。
到此這篇關(guān)于使用CSS定位HTML元素的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)CSS定位HTML元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3打造的現(xiàn)代交互式登錄界面詳細(xì)實(shí)現(xiàn)過程
本文介紹CSS3和jQuery在登錄界面設(shè)計(jì)中的應(yīng)用,涵蓋動(dòng)畫、選擇器、自定義字體及盒模型技術(shù),提升界面美觀與交互性,同時(shí)優(yōu)化性能和可訪問性，感興趣的朋友跟隨小編一起看看吧2025-06-20CSS普通流、浮動(dòng)與定位網(wǎng)頁布局三大機(jī)制及最佳實(shí)踐
本文給大家講解CSS 的三種核心布局機(jī)制——普通流(Normal Flow)、浮動(dòng)(Float)和定位(Positioning)對(duì)于創(chuàng)建靈活、響應(yīng)式的網(wǎng)頁至關(guān)重要,本文將深入探討這三種機(jī)制的工作原2025-06-19
css實(shí)現(xiàn)角標(biāo)效果并帶有文章或圖標(biāo)效果(完整代碼)
文章介紹如何用CSS實(shí)現(xiàn)角標(biāo)效果,通過.active類結(jié)合::after和::before偽元素,利用定位、邊框和旋轉(zhuǎn)創(chuàng)建紅色邊框與白色三角形的提示標(biāo)志,適用于按鈕或卡片元素的視覺增強(qiáng)設(shè)計(jì)2025-06-19CSS Anchor Positioning重新定義錨點(diǎn)定位的時(shí)代來臨(最新推薦)
CSS Anchor Positioning是一項(xiàng)仍在草案中的新特性，由 Chrome 125 開始提供原生支持需啟用實(shí)驗(yàn) flag,它允許你在 CSS 中通過錨點(diǎn)（anchor）來相對(duì)于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的應(yīng)用與詳細(xì)對(duì)比
CSS 中的 position 屬性用于控制元素的定位方式，不同的定位方式會(huì)影響元素在頁面中的布局和層疊關(guān)系,以下是 static、relative、absolute、fixed、sticky 的詳細(xì)對(duì)比和應(yīng)用2025-06-17CSS place-items: center解析與用法詳解
place-items: center; 是一個(gè)強(qiáng)大的 CSS 簡寫屬性，用于同時(shí)控制 網(wǎng)格(Grid) 和 彈性盒(Flexbox) 布局中的對(duì)齊方式，本文給大家介紹CSS place-items: center； 詳解與用法2025-06-17
CSS實(shí)現(xiàn)元素?fù)螡M剩余空間的五種方法
在日常開發(fā)中，我們經(jīng)常需要讓某個(gè)元素占據(jù)容器的剩余空間，本文將介紹5種不同的方法來實(shí)現(xiàn)這個(gè)需求，并分析各種方法的優(yōu)缺點(diǎn)，感興趣的朋友一起看看吧2025-06-17CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
CSS單位區(qū)別與使用場景總結(jié)：px絕對(duì)、vw/vh響應(yīng)式,%繼承父尺寸,em/rem文字縮放,vmin/vmax適應(yīng)寬高變化,固定布局用px或%,響應(yīng)式布局用vw/vh/rem,文字用em或rem，本文給大家2025-06-16CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié)
這篇文章主要介紹了CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2025-05-21- 在CSS布局中，padding屬性是控制元素內(nèi)容與其邊框之間距離的關(guān)鍵工具，本文介紹CSS基礎(chǔ)中padding，通過本文的介紹，我們深入了解了padding的基本概念、簡寫方法以及它對(duì)元2025-05-16
