次我們來說一下，HTML網頁中的定位，有很多小伙伴一定好奇，為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中，我們的各種樣式，標簽，圖片等東西都是出現在網頁的各個位置，網頁看起來很美觀，各種盒模型擺放合理，這是因為在HTML中有定位的能力，今天我們就來學習一下。

position在英語中是位置的意思，而在我們CSS代碼中position也是跟位置有關的，position有三個屬性值分別為relative（相對定位：相對于自己原來的位置進行定位，但保留自己原來的位置，別的元素無法占用），absolute（絕對定位：相對于有定位的父級進行定位，如果沒有則相對于文檔進行定位，定位會脫離文檔，不保留原來的位置，會和原來的文檔不在一個層），fixed（位置定位：他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告，他也會脫離文檔流）。

我們說完了position，接下來我們就說說他是怎么進行定位的，我們有left，top，right，bottom，五個屬性分別對應 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個方向前都加了個距字，我們所做的定位是距各個方向的距離而不是移動，例：left:200px，是向右移動200像素，他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對于底部定位的話就很困難。

我們來通過代碼和結果來看一下：

上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]

我們可以看出貓圖片并沒有移動，而是給兔子圖片留著位置。

這個結果我們可以看出貓圖片向前移動了，并沒有保留兔子圖片原來的位置

代碼中的<br>是為了使滑輪可以滑動，以便更好的展示效果。

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

用了fixed的效果展示。

以上的代碼樣式只對兔子圖片起作用，我沒有給貓添加任何樣式，貓圖片只是作為參照物。

Vue3 根據點擊位置，實現一個用戶頭像彈框定位

**開篇：**

在Web開發中，響應式UI設計一直是提升用戶體驗的關鍵所在。Vue3以其優秀的響應式機制和簡潔的API深受開發者喜愛。本文將詳細介紹如何利用Vue3的功能特性，結合DOM事件處理和CSS定位，實現一個可以根據點擊位置動態顯示用戶頭像彈框的功能。為了確保文章具有實踐指導意義，我們將按照實際操作流程，逐步解析并提供核心代碼示例。

---

### **一、搭建Vue3項目與基礎布局**

**標題：** 初始化項目與頁面結構設定

**內容：**

首先，使用Vue CLI創建一個新的Vue3項目，并在主頁面上設置基礎布局，包括一個用于觸發頭像彈框顯示的用戶頭像區域和一個隱藏的彈框組件。

```html

<template>

<div id="app">

<!-- 用戶列表或其他包含頭像的區域 -->

<div @click="showAvatarPopup($event)">

<img :src="user.avatarUrl" alt="User Avatar" class="avatar" />

</div>

<!-- 頭像彈框組件，初始狀態為隱藏 -->

<AvatarPopup v-if="isPopupVisible" :position="popupPosition" :user="user" @close="hideAvatarPopup" />

</div>

</template>

<script>

import AvatarPopup from '@/components/AvatarPopup.vue';

export default {

components: {

AvatarPopup,

},

data() {

return {

isPopupVisible: false,

user: { // 示例用戶數據

avatarUrl: 'path/to/avatar.jpg',

// 其他用戶信息...

},

popupPosition: { x: 0, y: 0 }, // 彈框初始位置

};

},

methods: {

showAvatarPopup(event) {

this.popupPosition = { x: event.clientX, y: event.clientY }; // 獲取點擊位置

this.isPopupVisible = true; // 顯示彈框

},

hideAvatarPopup() {

this.isPopupVisible = false; // 隱藏彈框

},

},

};

</script>

```

### **二、創建并樣式化頭像彈框組件**

**標題：** 設計并實現自定義的`AvatarPopup`組件

**內容：**

在`AvatarPopup.vue`組件中，我們需要接收傳遞過來的位置坐標，并使用CSS絕對定位來使彈框跟隨鼠標點擊位置展示。

```html

<!-- AvatarPopup.vue -->

<template>

<div class="avatar-popup" :style="{ top: position.y + 'px', left: position.x + 'px' }">

<img :src="user.avatarUrl" alt="Popup Avatar" class="popup-avatar" />

<!-- 其他用戶信息展示... -->

<button @click="emitClose">關閉</button>

</div>

</template>

<script>

export default {

props: {

position: Object,

user: Object,

},

emits: ['close'],

methods: {

emitClose() {

this.$emit('close');

},

},

};

</script>

<style scoped>

.avatar-popup {

position: absolute;

width: fit-content;

background-color: #fff;

border-radius: 4px;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

padding: 1rem;

z-index: 1000; /* 確保彈框位于頂層 */

}

.popup-avatar {

width: 100px;

height: 100px;

object-fit: cover;

}

</style>

```

### **三、優化彈框顯示邏輯**

**標題：** 考慮邊界情況，確保彈框始終在可視區域內

**內容：**

為了防止彈框超出瀏覽器窗口范圍，我們需要對計算出的彈框位置進行適當的調整：

```javascript

// 在App.vue中的methods內

showAvatarPopup(event) {

const viewportWidth = document.documentElement.clientWidth;

const viewportHeight = document.documentElement.clientHeight;

const popupWidth = document.querySelector('.avatar-popup').offsetWidth;

const popupHeight = document.querySelector('.avatar-popup').offsetHeight;

const x = Math.min(Math.max(event.clientX, popupWidth / 2), viewportWidth - popupWidth / 2);

const y = Math.min(Math.max(event.clientY, popupHeight / 2), viewportHeight - popupHeight / 2);

this.popupPosition = { x, y };

this.isPopupVisible = true;

}

```

### **四、添加過渡動畫效果**

**標題：** 使用Vue Transition實現彈框顯示/隱藏動畫

**內容：**

為了讓彈框的出現和消失更加流暢自然，我們可以使用Vue的Transition組件包裹AvatarPopup，為其添加CSS過渡動畫。

```html

<!-- App.vue -->

<transition name="fade" appear>

<AvatarPopup v-if="isPopupVisible" :position="popupPosition" :user="user" @close="hideAvatarPopup" />

</transition>

<style>

.fade-enter-active,

.fade-leave-active {

transition: opacity .3s ease;

}

.fade-enter-from,

.fade-leave-to {

opacity: 0;

}

</style>

```

---

**總結：**

通過以上步驟，我們成功地在Vue3項目中實現了根據點擊位置動態定位用戶頭像彈框的功能。這一功能在社交網絡、評論區以及其他需要展現用戶詳細信息的場景中非常實用，既提升了用戶體驗，也展現了Vue3強大而靈活的應用能力。隨著進一步實踐，你可以嘗試增加更多高級功能，如自動調整彈框方向以適應屏幕邊界，或是集成拖拽移動等功能，從而使得彈框組件更為完善和人性化。

SS 定位 (Positioning) 屬性允許你對元素進行定位。

CSS 定位和浮動

CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。

定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝于對其它方面的支持，對此不應感到奇怪。

另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發展初期增加的一個功能為基礎。浮動不完全是定位，不過，它當然也不是正常流布局。我們會在后面的章節中明確浮動的含義。

一切皆為框

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。

您可以使用 display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設置為 block，可以讓行內元素（比如 <a> 元素）表現得像塊級元素一樣。還可以通過把 display 設置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不占用文檔中的空間。

但是在一種情況下，即使沒有進行顯式定義，也會創建塊級元素。這種情況發生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：

<div>
some text
<p>Some more text.</p>
</div>

在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。

塊級元素的文本行也會發生類似的情況。假設有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應用樣式，因為沒有可以應用樣式的地方（注意，行框和行內框是兩個概念）。但是，這有助于理解在屏幕上看到的所有東西都形成某種框。

CSS 定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。

在下面的章節，我們會為您詳細講解相對定位、絕對定位和浮動。

CSS position 屬性

通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。

position 屬性值的含義：

static元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。relative元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。absolute元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。fixed元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。

提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

實例

定位 h2 元素：

代碼如下：

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標題</h2>
<p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p>
</body>
</html>

效果圖如下：

瀏覽器支持

所有主流瀏覽器都支持 position 屬性。

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

定義和用法

position 屬性規定元素的定位類型。

說明

這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。

可能的值