前端新手求助：按钮无法定位至屏幕右上角（附代码）

核心问题原因 #

你的<body>设置了display: flex; justify-content: center; align-items: center;，这会让body内所有直接子元素（包括按钮和.nameone容器）都被居中排列，所以按钮会依附在div旁边。另外你在body外写的按钮是无效的，HTML元素必须放在<body>标签内部。

修正后的代码 #

CSS部分

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* 添加相对定位，让绝对定位的按钮以body为参照 */
  position: relative;
}

.nameone {
  box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.4);
  position: relative;
  padding: 20px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 5%;
  /* 给复制后的div添加间距，避免挤在一起 */
  margin: 10px;
}

.buttonformatting {
  background-color: red;
  height: 25px;
  width: 25px;
  /* 关键：绝对定位脱离文档流，不受flex布局影响 */
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.text {
  border: none;
  text-align: center;
}

HTML&JS部分

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!-- 修正拼写错误：viewpoint → viewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>TrialV3</title>
  <link href="Style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <!-- 将按钮放在body最上方，避免被其他元素遮挡 -->
  <button id="buttonone" onclick="duplicate()" class="buttonformatting"></button>

  <div class="nameone">
    <input class="text" type="text" onkeypress="this.style.width = ((this.value.length + 1)*8 ) + 'px';">
  </div>

  <script>
    var i = 0;
    var original = document.querySelector('.nameone');

    function duplicate() {
      var clone = original.cloneNode(true);
      // 修正类名设置：DOM元素用className属性，无需加.前缀
      clone.className = "nameone" + ++i;
      original.parentNode.appendChild(clone);
    }
  </script>
</body>

</html>

关键修改点说明 #

• 按钮定位：给按钮添加position: absolute; top: 10px; right: 10px;，同时给body设置position: relative;，让按钮以整个页面为参照定位，彻底脱离flex布局的居中影响。
• 移除无效元素：删除body标签外的重复按钮，HTML规范要求所有页面内容必须放在<body>内部。
• 修复JS错误：把clone.class改为clone.className，DOM元素的类名属性是className，而非class，且不需要加.前缀。
• 优化细节：给.nameone添加margin避免复制后的容器挤在一起，修正meta标签拼写错误保证移动端适配。

内容的提问来源于stack exchange，提问作者danchdrezzing