fix: 調整關閉按鈕位置並修復程式碼區塊複製按鈕滾動問題

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=20250603009">
+    <link rel="stylesheet" href="style.css?v=20250603010">
     <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=20250603009"></script>
+    <script src="script.js?v=20250603010"></script>
 </body>
 </html>

script.js

@@ -183,6 +183,8 @@ function addCopyButtons() {
     const codeBlocks = document.querySelectorAll('.markdown-content pre');
 
     codeBlocks.forEach((block, index) => {
+        // 確保 pre 元素是 relative 定位
+        block.style.position = 'relative';
         // 獲取程式碼語言類型
         const codeElement = block.querySelector('code');
         const classList = codeElement.className.split(' ');

style.css

@@ -661,9 +661,10 @@ body {
 
 .markdown-close {
     position: sticky;
-    top: -30px;
-    margin-left: auto;
-    margin-right: -30px;
+    top: 20px;
+    float: right;
+    margin-top: -20px;
+    margin-right: -20px;
     margin-bottom: 20px;
     width: 36px;
     height: 36px;
@@ -718,8 +719,9 @@ body {
 
 @media (max-width: 768px) {
     .markdown-close {
-        top: -20px;
-        margin-right: -20px;
+        top: 15px;
+        margin-top: -10px;
+        margin-right: -10px;
         width: 32px;
         height: 32px;
         border-radius: 16px;