网站右上角固定垂直栏不显示问题求助

尝试为网站添加一个固定在屏幕右上角的垂直栏，但该元素始终无法按预期显示。通过浏览器审查元素发现，设置的#gradient-bar元素实际位于页面底部，与预期位置不符。

相关代码 #

CSS 代码 #

body {
    margin: 0;
    margin: 0;
    background-color: #0c7bcb; /* change to desired color */
    background-size: cover;
    height: 1ch;
    height: 150px;
    overflow: hidden;
}

.bar {
    padding-top: 0.5px;
    font-size: small;
    border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
    font-family: Arial, Helvetica, sans-serif;
    color: aliceblue;
    border-style: solid;
    background-color: #0c7bcb;
    background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 30px; /* adjust as needed to make room for the icon */
    border-bottom-width: 0.5px;
    border-top-width: 0.5px;
    background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
    
}

#close-button {
    padding-top: 1px;
    color: aliceblue;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
}
.updates {
    background-color: aliceblue;
    border-color: aliceblue;
    color: #2bab10;
    position: absolute;
    top: 135px;
    right: 300px;
    font-weight: bolder;
    font-family: 'main';
    width: 1000px;
    overflow: auto;
    max-height: 6in;
    }
.back {
    background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
}
#baro {
    background-color: #78ac4c;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
  }
  #play-btn {
    background-color: yellow;
    color: black;
    border-radius: 100px;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
  }
  
  @font-face {
    font-family: main;
    src: url(font.ttf);
  }


.discord ul {
    font-weight: bold;
    color: green;
    font-family: Arial, Helvetica, sans-serif;
  }
.dickkord ul {
    font-weight: bold;
    color: green;
    font-family: Arial, Helvetica, sans-serif;
}

/* 重复的样式定义 */
body {
    margin: 0;
    margin: 0;
    background-color: #0c7bcb; /* change to desired color */
    background-size: cover;
    height: 1ch;
    height: 150px;
    overflow: hidden;
}

.bar {
    padding-top: 0.5px;
    font-size: small;
    border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
    font-family: Arial, Helvetica, sans-serif;
    color: aliceblue;
    border-style: solid;
    background-color: #0c7bcb;
    background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 30px; /* adjust as needed to make room for the icon */
    border-bottom-width: 0.5px;
    border-top-width: 0.5px;
    background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
    
}

#close-button {
    padding-top: 1px;
    color: aliceblue;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
}
.updates {
    background-color: aliceblue;
    border-color: aliceblue;
    color: #2bab10;
    position: absolute;
    top: 135px;
    right: 300px;
    font-weight: bolder;
    font-family: 'main';
    width: 1000px;
    overflow: auto;
    max-height: 6in;
    }
.back {
    background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
}
#baro {
    background-color: #78ac4c;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
  }
  #play-btn {
    background-color: yellow;
    color: black;
    border-radius: 100px;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
  }
  
  @font-face {
    font-family: main;
    src: url(font.ttf);
  }


.discord ul {
    font-weight: bold;
    color: green;
    font-family: Arial, Helvetica, sans-serif;
  }
.dickkord ul {
    font-weight: bold;
    color: green;
    font-family: Arial, Helvetica, sans-serif;
}

#gradient-bar {
    background: linear-gradient(to right, #000000, #ffffff);
    height: 20px;
    width: 100%;
    }

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eaglercraft.xyz</title>
</head>
<body>


    <div class="bar">
        <p>
            Eaglercraft.xyz Launcher
        </p>
    </div>
    <div id="close-button">&times;</div>
    <div class="back">
        <pi></pi>
    </div>
    <div id="gradient-bar">
        <p>aaseasea</p>
    </div>
<div class="updates">
    <div class="Texty">
    <p>&nbsp;&nbsp;&nbsp;&nbsp;Be sure to join our discord!</p>
    <div class="discord">
        <ul style="color: black; font-weight: 100;"></ulstyle>Stay up to date with the latest news, contests, giveaways and other cool things: discord.gg :)</ul>
    </div>
<div class"dickkord">
<p style="color: #298bc4">&nbsp;&nbsp;&nbsp;&nbsp;Minecraft 1.8</p>
<ul style="color: black;"></ulstyle>Diorite: Crafted using 2 cobblestone and 2 Nether quartz in a checkerboard pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Andesite: Crafted using 1 cobblestone and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Granite: Crafted using 1 Nether quartz and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Coarse Dirt: Replaces grassless dirt found in mega taiga, mesa and savanna biomes. It is slightly darker than regular dirt. Tilling it with a hoe turns it to regular dirt. Can be crafted using dirt and gravel in a 2x2 checkered pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine: Generates in ocean monuments and can be crafted using prismarine shards. Cracks in prismarine slowly change color.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine Bricks: Generates in ocean monuments and can be crafted using prismarine shards.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Dark Prismarine: Generates in ocean monuments and can be crafted using prismarine shards and an ink sac.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Red Sandstone: Can be crafted using 4 red sand in a square. Comes in chiseled, smooth, stair, and slab forms. Generated only in Mesa biomes at cave entrances.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Iron Trapdoor: Can only be opened and closed using redstone. Crafted using iron ingots in a 2x2 pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Sea Lantern: Generates in ocean monuments and can be crafted using prismarine shards and prismarine crystals. Emits light and has an animated texture.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Wet Sponge: Obtained when a sponge soaks up water. Smelting yields a dry sponge. Emits water dripping particles. Dropped by elder guardians.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Slime Block: Crafted using 9 slime balls. Players and mobs bouncing on top. Pushes and pulls blocks when moved by a piston. Does not affect falling items.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Banners: Crafted like signs but using wool. Can be stacked to 16 and have up to 6 layers. Can be placed on walls or on the ground. Different patterns can be made using dyes and certain items.</ul>
</div>
    </div>
</div>
<div id="baro">
    <select id="menu1">
      <option selected value="latest">Latest Releases</option>
      <option value="1.5">1.5</option>
      <option value="1.8">1.8</option>
    </select>
    <select id="menu2" style="display: none;">
    </select>
    <button id="play-button" style="background-color: #f0c43c; border-radius: 20%; align-content: center;">Play</button>
  </div>
  
  

  <script src="epic.js"></script>
</body>
</html>

核心问题 #

1. body样式限制内容显示：CSS中重复定义body，设置了height: 150px和overflow: hidden，导致页面内容超出150px的部分被隐藏，#gradient-bar被挤到底部且可能被遮挡。
2. #gradient-bar缺少定位属性：没有添加固定定位，无法固定在右上角；同时当前样式是水平条（宽100%、高20px），不符合垂直栏需求。
3. CSS代码冗余：重复定义多组相同样式，可能引发冲突或无效加载。
4. HTML存在语法错误：比如<div class"dickkord">缺少等于号，<ul>标签内的</ulstyle>是无效标签。

修复步骤 #

1. 清理冗余CSS：删除重复的body、.bar等样式定义，仅保留一份。
2. 修改body样式：移除高度限制和溢出隐藏，让页面内容正常展示：

body {
    margin: 0;
    background-color: #0c7bcb;
    background-size: cover;
}

3. 重构#gradient-bar样式：添加固定定位，改为垂直栏并固定在右上角：

#gradient-bar {
    background: linear-gradient(to bottom, #000000, #ffffff); /* 垂直渐变 */
    width: 20px; /* 垂直栏宽度 */
    height: 100vh; /* 高度铺满视口 */
    position: fixed; /* 固定定位 */
    top: 0;
    right: 0; /* 固定在右上角 */
    z-index: 999; /* 确保在其他元素上方 */
}

4. 修复HTML语法错误：
   • 将<div class"dickkord">改为<div class="dickkord">
   • 删除无效的</ulstyle>标签，修正<ul>的闭合逻辑

可选优化 #

• 移除#gradient-bar内的<p>标签，垂直栏无需内部文本；若需要文本，可添加旋转或排版样式
• 调整.updates的width: 1000px为响应式宽度，避免小屏幕溢出

内容的提问来源于stack exchange，提问作者Video Game Bot