如何使按钮组出现在另一个 <div> 上方？

Posted 2023-02-23

【中文标题】如何使按钮组出现在另一个 <div> 上方？

【英文标题】：How to make a button group appear above another <div>?

【发布时间】：2021-01-07 09:09:32

【问题描述】：

我有一个容器，其中有一个可垂直滚动的图像轮播。

我想要一个按钮组，作为这些图像上的选项卡，就像这样。

这是按钮组的代码和结果。

<template>
<div class="row">
 <div class="gallery-container">
  <div class="template-tabs-container">
   <v-btn-toggle tile color="secondary" group>
    <v-btn>All </v-btn>
    <v-btn>Private</v-btn>
    <v-btn>Shirt</v-btn>
    <v-btn>Suit</v-btn>
   </v-btn-toggle>
  </div>
  <div v-for="tem in allTemplates" v-bind:key="tem.id" class="gallery-item item-template">
   <img :src=tem.thumbnailLink  >
  </div>
 </div>
</div>
</template>
<script>

</script>
<style>
.row 
    display: flex;
    position: relative;
    justify-content: center;


.gallery-container 
    position: absolute;
    bottom: 0;
    width: 65%;
    /* display: none; */
    /* display: block; */


.gallery-templates 
    width: 100%;
    height: 200px; 
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;


.gallery-item 
    display: inline-block;
    margin: 5px 0px 5px 0px;

</style>

我怎样才能使这些按钮在这些图像上方显示为上图中的选项卡？

【问题讨论】：

你可以为页面添加你的css吗？然后我们可以看看为什么它显示在那里而不是在正确的位置

@Warden330 添加了css

【参考方案1】：

以基本 html / CSS 为例：

.row 
    display: flex;
    position: relative;
    justify-content: center;
    /*height + width only set for display in snippet, you dont need that*/
    height: 250px;
    width: 100vw;


/*main container*/
.gallery-container 
    position: absolute;
    bottom: 0;
    width: 65%;
    display: flex;
    flex-direction: column;

/*button container needs the same width as Image container and needs to be row*/
.buttons 
  width: 100%;
  display: flex;
  flex-direction: row;

/*buttons need fixed width, same as images*/
.buttons button 
  width: 25%;

/*image container needs the same width as button container and needs to be row*/
.images 
  width: 100%;
  display: flex;
  flex-direction: row;

/*Images need fixed width, same as buttons*/
.images img 
  width: 25%;

<div class="row">
 <!--Main Container-->
 <div class="gallery-container">
  <div class="template-tabs-container">
  <!--Container for buttons-->
   <div class="buttons" tile color="secondary" group>
    <button>button1 </button>
    <button>button2 </button>
    <button>button3 </button>
    <button>button4 </button>
   </div>
  </div>
  <!--Container for images-->
  <div class="images">
   <img src="https://cdn.pixabay.com/photo/2020/09/15/06/02/leaves-5572789_960_720.jpg">
   <img src="https://cdn.pixabay.com/photo/2020/09/15/06/02/leaves-5572789_960_720.jpg">
   <img src="https://cdn.pixabay.com/photo/2020/09/15/06/02/leaves-5572789_960_720.jpg">
   <img src="https://cdn.pixabay.com/photo/2020/09/15/06/02/leaves-5572789_960_720.jpg">
  </div>
 </div>
</div>

所以你基本上想让整个画廊容器成为一个弹性列，这样按钮的容器和图像的容器就会显示在彼此之上。然后您需要确保按钮显示为一行，并且该行与图像行具有相同的宽度。我在这里没有包含的代码是你需要给单个按钮一个类或直接设置它们的样式，确保按钮具有与单个图像相同的单个宽度。然后它们应该彼此重叠：

 .gallery-container 
        position: absolute;
        bottom: 0;
        width: 65%;
        display: flex;
        flex-direction: column;
    
    /*buttons*/
    .template-tabs-container 
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    
    
    /*images*/
    .gallery-templates 
        width: 100%;
        height: 200px; 
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    

【讨论】：

感谢您的回答，我认为如果您能举例说明会更有帮助。谢谢。

添加了一个例子:)