Question

这是我的模型，我希望它看起来如何。请注意，文本与div .slider所在的嵌套<h1>重叠。

<div class="slider" data-pos="0">

        <div class="slider__slides">
            <div class="slider__slide">
                <h1 class="yellow">happy fruit</h1>
                <h2 class="yellow">slide 1</h2>
            </div>
            <div class="slider__slide">
                <h1 class="yellow">happy fruit</h1>
                <h2 class="yellow">slide 2</h2>
            </div>
            <div class="slider__slide">
                <h1 class="yellow">happy fruit</h1>
                <h2 class="yellow">slide 3</h2>
            </div>
            <div class="slider__slide">
                <h1 class="yellow">happy fruit</h1>
                <h2 class="yellow">slide 4</h2>
            </div>
        </div>

        <!--Don't really mind these, navigation balls-->
        <div class="slider__dots">
            <a class="slider__indicator" href="#"></a> 
            <a class="slider__dot" data-pos="0" href="#"></a> 
            <a class="slider__dot" data-pos="1" href="#"></a> 
            <a class="slider__dot" data-pos="2" href="#"></a> 
            <a class="slider__dot" data-pos="3" href="#"></a>
        </div>

    </div>

这是模型。

.slider { overflow: hidden; }

给我这个结果

.slider { overflow: visible; }

给我这个结果

结论：我需要overflow: hidden;，否则幻灯片也会显示，而滑块的外观和工作方式并非如此。但是，文字不会覆盖顶部overflow: hidden;

overflow:visible;显示文字覆盖但后来我看到左侧（和右侧）的幻灯片。

知道如何在保持标签嵌套在.slider内的同时解决这个问题吗？我试过了overflow-x和overflow-y，但这些似乎都没有用（bug？）

我已经在我的主机上上传了一个live version here，你想玩/尝试一些东西。如果需要的话，我可以将它上传到jsfiddle，尽管它有很多代码。（如果文本是删除线，这意味着您正在错误的视口中查看它，请尝试将窗口向下拖动，现在只为手机/平板电脑尺寸编写。）

在保持转换的同时重叠嵌套父（div）的文本：隐藏;

0 个答案: