Question

我想在下面做同样的设计

但我对浮动div有问题，这是相机图标。它应该是可点击的。我把z-index放在了会改变的图像之上。我想让所有div都可以点击。

希望你们能帮帮我。

谢谢！

这是我的代码

<article class="RegistrationInfo__Section media">
    <div class="RegistrationInfo__Section--image media-left">
      <div class="field">
        <span class="file-bg">
          <span
            class="icon is-large"
            v-if="formObject.image"
          >
            <img v-if src="~@/assets/images/camera.png">
          </span>

          <img v-else src="~@/assets/images/camera.png">
        </span>
        <div class="file is-boxed">
          <label class="file-label">
            <input
              class="file-input"
              type="file"
              name="image"
              ref="input"
              @change="validateAndProcessImage"
            >
            <span class="file-cta">
              <span class="file-icon">
                <img
                  v-if="formObject.image"
                  :src="`/api/files/${formObject.image}`"
                >
                <img v-else src="~@/assets/images/profile_off.png">
              </span>
            </span>
          </label>
        </div>
        <p v-if="formErrors.imageFiles" class="help is-danger">{{ formErrors.imageFiles[0] }}</p>
      </div>
    </div>
  </article>

这是我的SCSS文件。

.RegistrationInfo {
@at-root #{&}__Section {
@at-root #{&}--image {
  margin-right: 2rem;
  .field {
    position: relative;

    .file-bg {
      position: absolute;
      z-index: 1;
      right: -10px;
      width: 50px;
      height: 50px;

      .icon i {
        cursor: pointer;
        margin: auto;
      }
    }

    .file {
      &.is-boxed {
        .file-icon {
          height: 128px;
          width: 128px;
          margin-right: 0;
        }
        .file-cta {
          padding: 0;
          border-radius: 50%;
          justify-content: center;

          img {
            height: 128px;
            width: 128px;
            border-radius: 50%;
            object-fit: cover;
            object-position: top;
          }
        }
      }
    }

    .help {
      max-width: 128px;
    }
  }
}

Answer 1

问题似乎与您设置的z-index有关。

默认情况下，除非另有说明，否则所有页面元素的z-index均为1。如果.file-bg是您的相机图标，则将z-index更改为2将使您的div可单击。

带有z-index的可点击div

1 个答案: