当我向下滚动时，图像下降

Question

当我向下滚动时，图像下降。我不明白为什么:(。请帮帮我！

PHP代码：

<div class="shop-filter__viewport" style="<?php echo $style;?>">
    <?php foreach ($components as $component): ?>
        <?php if (isset($component['options'])): ?>
            <?php $options = $component['options']; ?>
            <?php if ($component['component_type'] == Customizer_Public::COMPONENT_TYPE_IMAGE) : ?>
                <?php foreach ($options as $option): ?><?php $zIndex++;?><?php endforeach; ?>
                <?php continue; ?>
            <?php endif; ?>
            <?php $uploadImageComponent = true; ?>
            <?php if ($component['component_type'] != Customizer_Public::COMPONENT_TYPE_CUSTOM_IMAGE) $uploadImageComponent = false; ?>
                <?php foreach ($options as $option): ?>
                    <div
                        class="shop-filter__viewport__<?php echo $uploadImageComponent ? 'picture' : 'text'; ?>"
                        data-sf-render="<?php echo $option['option_id']; ?>"
                        style="left:<?php echo $option['option_left']; ?>%;
                            top:<?php echo $option['option_top']; ?>%;
                            height: <?php echo $option['option_height']; ?>%;
                            width: <?php echo $option['option_width']; ?>%;
                            transform: rotate(<?php echo $option['option_transform']; ?>deg);
                            color: #fff;
                            z-index: <?php echo $zIndex++; ?>"></div>
                <?php endforeach; ?>
        <?php endif; ?>
    <?php endforeach; ?>
    <div data-sf-render="optionImg">
        <?php if ($defaultImage): ?>
            <img src="<?php echo $defaultImage; ?>" class="shop-filter__viewport__option-img default_image"
                 style="z-index:-1;"/>
        <?php endif; ?>
    </div>
</div>

这是CSS代码：

.shop-filter__viewport {
    position: relative
}

.shop-filter__viewport img {
    max-width: 100%;
}

.shop-filter__viewport__text {
    position: absolute;
    z-index: 99;
    text-align: center;
    line-height: 0
}

.shop-filter__viewport__picture {
    position: absolute;
    z-index: 98;
    overflow: hidden
}

.shop-filter__viewport__picture img {
    height: 100%
}

.shop-filter__viewport__option-img {
    position: absolute;
    left: 0;
    top: 0
}

Answer 1

我现在实际上有同样的问题，我对css不太了解，我在shopify代码设置中弄乱了代码，然后即使我撤消了更改，问题仍然存在。当我检查这里的东西时，我发现了问题所在，但不知道如何解决。