如何在Buefy导航栏下方放置元素？Buefy-Vue中元素垂直布局的响应式实现咨询

首先，你遇到的布局错乱问题确实是因为**绝对定位（position:absolute）**导致的——绝对定位的元素会脱离正常文档流，它的位置参考的是最近的已定位父元素（如果没有就是视口），当窗口缩放时，百分比的margin-left和固定宽度的组合会让元素位置偏移，同时下面的.second用相对定位也会跟着乱。

下面给你几个更适合响应式的解决方案，优先推荐Flexbox，因为它是现代布局的首选，和Vue/Buefy的兼容性也很好：

方案1：用Flexbox实现垂直居中+上下排列（最推荐） #

把这三个元素放在一个父容器里，用Flexbox来控制布局，这样不管窗口怎么缩放，元素都会保持上下排列且居中，完全不需要绝对定位。

修改后的Vue模板： #

<template>
  <div class="logo-name-container">
    <img class="mainLogo rotate" src="./assets/logo.svg" />
    <h1 class="name first">Name</h1>
    <p class="undername second">Text I want under name</p>
  </div>
</template>

对应的CSS： #

.logo-name-container {
  /* 开启Flex布局，垂直排列子元素 */
  display: flex;
  flex-direction: column;
  /* 水平居中所有子元素 */
  align-items: center;
  /* 控制元素间的间距，比margin更灵活 */
  gap: 0.5rem;
  padding: 1rem;
  /* 可选：如果需要整体垂直居中，可添加以下两行 */
  /* min-height: 100vh; */
  /* justify-content: center; */
}

.first {
  /* 去掉绝对定位和相关的margin、top */
  width: auto; /* 让宽度自适应内容，也可按需设百分比 */
  height: auto;
  margin: 0;
}

.second {
  width: auto;
  height: auto;
  margin: 0;
  /* 去掉相对定位和top */
}

.mainLogo {
  /* 给logo设置最大宽度，保证响应式缩放 */
  max-width: 120px;
}

如果你想用Buefy的内置辅助类（不用写自定义CSS），可以直接给父容器加Buefy的布局类，更符合框架开发习惯：

<template>
  <div class="is-flex is-flex-direction-column is-align-items-center has-gap-4 p-4">
    <img class="mainLogo rotate" src="./assets/logo.svg" />
    <h1 class="name first">Name</h1>
    <p class="undername second">Text I want under name</p>
  </div>
</template>

（has-gap-4是Buefy的间距类，p-4是内边距类，可根据需求调整数值）

方案2：如果一定要保留定位（不推荐） #

如果你因为某些原因必须用定位，可以把父容器设置为position: relative，让子元素的绝对定位参考这个父容器，同时用transform实现居中，避免缩放时偏移：

修改后的CSS： #

/* 给父容器加相对定位，作为子元素定位的参考 */
.logo-name-container {
  position: relative;
  width: 100%;
  min-height: 150px; /* 给父容器设置最小高度，避免内容溢出 */
}

.first {
  position: absolute;
  left: 50%; /* 先定位到父容器水平中点 */
  transform: translateX(-50%); /* 向左偏移自身宽度的一半，实现完美居中 */
  width: 12%;
  height: 100px;
  margin: 0;
  top: 0.5%;
}

.second {
  position: relative;
  top: 110px; /* 基于.first的高度设置top，保证在下方 */
  width: 15%;
  margin: 0 auto; /* 水平居中 */
}

不过这个方案灵活性不如Flexbox，窗口缩放到很小时元素可能重叠，所以还是优先推荐Flexbox方案。

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