css - vuetify.js v-sheet 中的固定元素不起作用

Question

我正在使用 vuetify 开发一个站点。我有这样的布局:

问题是我在复制代码图标中使用了绝对显示，所以如果我向右滚动代码，我会得到这个:

如果我尝试将 display 从 absolute 设置为 fixed，我不知道为什么，我在代码片段中找不到图标，而是在页面的右上角:

这是最内部组件的代码(代码片段):

<template>
  <div>
    <v-fade-transition>
      <v-sheet class="code d-flex grey--text text--lighten-3 pa-4" :color="background" @mouseenter="showCopy = true" @mouseleave="showCopy = false">
        <v-fade-transition>
          <v-btn v-if="showCopy" flat icon class="copy" color="success lighten-3" @click="copyCode">
            <v-icon>content_copy</v-icon>
          </v-btn>
        </v-fade-transition>

        <v-layout column>
          <v-flex
            v-for="(row, index) of rows"
            :key="index"
            :class="getClass(index)"
            @mouseenter="rowEntered(index)"
            @mouseleave="rowLeft(index)"
            @click="rowClicked(index)"
          >
            <span class="orange--text text--lighten-3 mr-3 code-row">{{ getRowText(index + 1) }}</span>
            <span>{{ row }}</span>
          </v-flex>
        </v-layout>
      </v-sheet>
    </v-fade-transition>

    <v-snackbar v-model="showSnackbar" color="success">
      <span>Testo copiato negli appunti!!!</span>
      <v-btn dark flat @click="showSnackbar = false">Close</v-btn>
    </v-snackbar>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import copyToClipboard from 'copy-to-clipboard';

@Component({
  components: {}
})
export default class AppExamCardCode extends Vue {
  @Prop({ type: String, required: true })
  readonly code!: string;

  readonly color = 'grey';
  readonly darkenDefault = 'darken-3';
  readonly darkenSelected = 'darken-2';
  showCopy = false;
  showSnackbar = false;
  hovered = -1;
  selected: number[] = [];

  get background(): string {
    return this.color + ' ' + this.darkenDefault;
  }

  get rows(): string[] {
    return this.code.split('\n');
  }

  //rowClicked, rowLeft, rowEntered, getClass(returns only row background color, getRowText), 

  copyCode(): void {
    copyToClipboard(this.code);
    this.showSnackbar = true;
  }
}
</script>

<style scoped>
.code {
  border-radius: 12px;
  overflow-x: auto;
  letter-spacing: 0.5px;
  word-spacing: 1px;
  font-family: "Inconsolata", monospace;
  white-space: pre;
  font-weight: 300;
  font-size: 15px;
}

.code-row {
  letter-spacing: 0.8px;
}

.copy {
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
}
</style>

这是包含它的地方:(AppExamCardCodeExercise)

<template>
  <div class="code-exercise">
    <app-exam-card-code :code="exercise.code" />
    <app-exam-card-code-answer :solution="exercise.solution" :showAnswers="showAnswers"/>
  </div>
</template>

包含在 AppExamCardExercise 中:

<template>
  <div>
    <app-exam-card-true-or-false-exercise v-if="isTrueOrFalse" :showAnswers="showAnswers"/>
    <app-exam-card-code-exercise v-else :showAnswers="showAnswers"/>
  </div>
</template>

包含在 AppExamCard 中:

<template>
  <div>
    <v-scale-transition>
      <v-card v-if="show" class="exam-card" :class="cardClass" flat>
        <!-- omitted -->
        </v-toolbar>

        <v-card-text>
          <v-slide-y-transition mode="out-in">
            <v-layout row pa-5 :key="current">
              <v-flex xs12>
                <app-exam-card-score v-if="isFinished && showScore" />
                <app-exam-card-exercise v-else :showAnswers="showAnswers" />
              </v-flex>
            </v-layout>
          </v-slide-y-transition>
        </v-card-text>

        <v-card-actions>
          <!-- omitted -->
        </v-card-actions>
      </v-card>
    </v-scale-transition>
  </div>
</template>

Answer 1

你的问题是复制图标是 position: absolute 而你的代码块(带有滚动条)是 position: relative，所以它一起滚动。

将代码块设置为 position: static，然后将其包装在 div 中，并将该 div 设置为 position: relative，因此复制按钮是相对于父-父 div(不可滚动)

HTML

<div class="fix">
  <code>
    <span class="copy">Copy</span>
    [...]
  </code>
</div>

CSS

.fix {
  position: relative;
}
.fix code {
  position: static;
}

参见:https://jsfiddle.net/voxp8rgf/1/