如何使用css定位html元素？（附示例）

2020-03-24 16:03:28

字體：大中小

來源：轉載

供稿：網友

在頁面上定位內容時，可以使用少量屬性來幫助操作元素的位置。本文將給你介紹一些使用CSS position 屬性包含不同定位元素類型的示例。

要在元素上使用定位，必須首先聲明其位置property，該位置指定用于元素的定位方法的類型。使用position屬性值，使用top，bottom，left和right屬性定位元素。它們的位置也取決于它們的位置值。（推薦課程：css視頻教程）

定位值有五種類型：html' target='_blank'>static（靜態的）、relative（相對的）、fixed（固定的）、absolute（絕對的）、sticky（黏性的）

static（靜態的）

默認情況下，HTML元素定位為靜態，元素根據文檔的正常流程定位; 靜態定位元素不受頂部，底部，左側和右側屬性的影響。一個元素用position: static定位不會有其他特殊的定位方式。

用于將位置設置為靜態的CSS是：

position: static;

接下來是使用靜態位置值的示例：

!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 >

效果如下：

360截圖20181105094735142.jpg

relative（相對的）

該元素根據文檔的正常流動位于相對于它的正常位置被定位，然后偏移相對于本身的基于上，右，下和左的值。偏移量不會影響任何其他元素的位置; 因此，頁面布局中為元素給出的空間與位置是靜態的相同。設置相對定位元素的頂部，右側，底部和左側屬性將使其遠離其正常位置進行調整。其他內容不會被調整以適應元素留下的任何空白。

用于將位置設置為相對的CSS是：

position: relative;

以下示例使用相對位置值：

!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 >

效果如下：

360截圖20181105095023965.jpg

absolute（絕對的）

該元素將從普通文檔流中刪除，并且在頁面布局中，不會為該元素創建空間。元素相對于最近定位的祖先定位，如果有的話; 否則，它相對于初始包含塊放置，其最終位置由頂部，右側，底部和左側的值確定。

用于將位置設置為絕對的CSS是：

position: absolute;

具有position: absolute; 相對于最接近的祖先定位的元素。如果絕對定位元素沒有定位祖先，它將使用文檔正文，并與頁面滾動一起移動。“定位”元素是其static位置的元素

以下例子強調元素的絕對位置：

!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 >

效果如下：

360截圖20181105095425516.jpg

fixed（固定的）

它從正常文檔流中刪除的元素，并且在頁面布局中，沒有為元素創建空間。元素相對于由視口建立的初始包含塊定位，其最終位置由值top，right，bottom和left確定。此值始終創建新的堆疊上下文。

用于將位置設置為固定的CSS如下所示：

position: fixed;

元素position: fixed; 相對于視口定位，這意味著即使頁面滾動，它也始終保持在同一位置。top，right，bottom和left屬性用于定位元素。

sticky（黏性的）

該元素對應于文檔的正常流程定位，然后根據頂部，右側，底部和左側的值相對于其最接近的上升塊級別（包括與表格相關的元素）偏移。偏移量不會影響任何其他元素的位置。

此值始終創建新的堆疊上下文。請注意，粘性元素“粘附”到其最近的祖先，即使該祖先不是最近的實際滾動祖先，也具有“滾動機制”。

用于將位置設置為粘性的CSS是：

position: sticky;

position: sticky; 根據用戶的滾動位置定位元素，并根據滾動位置在位置relative 和fixed位置之間切換。

重疊元素

網頁上的重疊元素非常有用，可以突出顯示，推廣和關注我們網頁上的重要內容。在您的網站上制作元素疊加是非常有用且非常有價值的功能設計實踐。當元素被定位時，它們可以與其他元素重疊，因此為了指定順序（應該在其他元素的前面或后面放置哪個元素），我們應該使用z-index屬性。堆棧順序較大的元素始終位于堆棧順序較低的元素前面。作為通知，z-index屬性僅適用于定位元素（position：absolute，position：relative或position：fixed）。

以下示例顯示了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 >效果如下：
在圖像上定位文本
下面的示例使用上述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 >效果如下：
最后
在本文中，我們已經描述并給出了CSS定位類型的示例，并描述了如何重疊元素并在圖像上添加一些文本。
以上就是如何使用css定位html元素？（附示例）的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。