fix: 修正複製按鈕滾動問題並調整按鈕位置

- 複製按鈕改用 position: sticky 避免滾動時移位
- 統一關閉按鈕和複製按鈕的邊距設計
- 調整程式碼區塊內距以配合按鈕位置
- 移除 hover 才顯示的設計，讓按鈕一直可見

Author: yulin0629

index.html

@@ -8,7 +8,7 @@
     <meta http-equiv="Expires" content="0">
     <meta name="theme-color" content="#000000">
     <title>GitHub Copilot 教學專案</title>
-    <link rel="stylesheet" href="style.css?v=20250603003">
+    <link rel="stylesheet" href="style.css?v=20250603005">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
 </head>
@@ -352,6 +352,6 @@ <h3 style="font-size: 1.25rem; font-weight: 600; color: #1d1d1f; margin-bottom:
         </div>
     </div>
 
-    <script src="script.js?v=20250603003"></script>
+    <script src="script.js?v=20250603005"></script>
 </body>
 </html>

script.js

@@ -195,7 +195,7 @@ function addCopyButtons() {
 
         // 創建按鈕容器
         const buttonContainer = document.createElement('div');
-        buttonContainer.style.cssText = 'position: absolute; top: 5px; right: 5px; display: flex; gap: 5px; align-items: center;';
+        buttonContainer.style.cssText = 'position: sticky; top: 10px; float: right; margin-right: -5px; margin-top: -35px; display: flex; gap: 5px; align-items: center; z-index: 10;';
 
         // 如果有語言標示，添加語言標籤
         if (language) {
@@ -265,8 +265,8 @@ function addCopyButtons() {
         // 添加按鈕到容器
         buttonContainer.appendChild(button);
 
-        // 添加容器到程式碼區塊
-        block.appendChild(buttonContainer);
+        // 將容器插入到程式碼區塊的開頭
+        block.insertBefore(buttonContainer, block.firstChild);
     });
 }
 

style.css

@@ -661,12 +661,12 @@ body {
 
 .markdown-close {
     position: sticky;
-    top: 10px;
+    top: 15px;
     float: right;
     margin-left: 20px;
     margin-bottom: 20px;
-    margin-top: -10px;
-    margin-right: -10px;
+    margin-top: -20px;
+    margin-right: -20px;
     width: 36px;
     height: 36px;
     cursor: pointer;
@@ -720,9 +720,9 @@ body {
 
 @media (max-width: 768px) {
     .markdown-close {
-        top: 5px;
-        margin-right: -5px;
-        margin-top: -5px;
+        top: 10px;
+        margin-right: -10px;
+        margin-top: -10px;
         width: 32px;
         height: 32px;
         border-radius: 16px;
@@ -774,7 +774,8 @@ body {
     background: rgba(142, 142, 147, 0.08);
     border: none;
     border-radius: 12px;
-    padding: 20px;
+    padding: 15px;
+    padding-top: 45px;
     overflow-x: auto;
     margin: 20px 0;
     position: relative;
@@ -803,17 +804,10 @@ body {
 
 .markdown-content pre .copy-button,
 .markdown-content pre .lang-label {
-    opacity: 0;
+    opacity: 1;
     transition: opacity 0.3s;
-    position: absolute;
-    top: 20px;
-    right: 20px;
 }
 
-.markdown-content pre:hover .copy-button,
-.markdown-content pre:hover .lang-label {
-    opacity: 1;
-}
 
 .copy-button:hover {
     background: #0077ed;