Question

我正在设置一个文本块以显示为修剪/短版本然后使用动画来显示完整的文本块，所以我将它们放入两个不同的元素，并隐藏/显示你能看到哪一个。

这是我的示例代码，文本不同但它仅仅是我正在做的一个例子。我的问题是我需要始终确保 #next 中的绿色文本块始终显示在红色或蓝色文本块之后。

HTML：

<div class="wrapper">
    <div id="parent">
        <div id="short">
            Only a small amount of text
        </div>
        <div id="long" style="display: none">
            A much longer text with <br>
            some lines<br>
            ...<br>
            ...<br>
            ...<br>
            ...<br>
            Surprise!
        </div>
    </div>
</div>

<div id="next">
    Other content<br>
    to show up<br>
    here<br>
    <button onclick="toggle()">TOGGLE TEXT</button>
</div>

JS：

toggle = function() {
    var lElem = $('#long');
    var sElem = $('#short');
    if (lElem.css('display') == 'none') {
        sElem.hide('fast');
        lElem.show('fast');
    } else {
        lElem.hide('fast');
        sElem.show('fast');
    }
}

CSS：

.wrapper {
    height: auto;
}

#parent {
    position: absolute;
}

#short, #long {
    position: relative;
}

#short {
    background-color: red;
}

#long {
    background-color: blue;
}

#next {
    background-color: green;
    font-size: 3em;
}

JsFiddle： http://jsfiddle.net/6v9fyg2g/

我尝试过使用位置：绝对和相对以及添加高度：100％，但这似乎无法解决问题。

Answer 1

只要next不是parent且parent为absolute的孩子，就无法实现所需目标。

来自MDN：

absolute： 不要为元素留出空间。而是将其放置在相对于其最近的祖先的指定位置或者包含块。绝对定位的盒子可以有边距，它们不会随着任何其他边缘而崩溃。

（强调我的）。

在这种情况下会发生parent放置在(0,0)并且布局的其余部分（包括next，）会在不考虑parent的情况下流动因此next计算所有意图和目的作为第一个元素，最后在开头。

一种可能的解决方案是从position: absolute中移除parent。然后，根据需要，＆＃34; #next中的绿色文本块始终显示在红色或蓝色文本块之后＆＃34;，如下所示：

http://jsfiddle.net/6v9fyg2g/4/

然后，您可以根据需要调整divs的其他属性（例如宽度）。

您可能希望将display: inline或inline-block作为初学者（第二个选项更接近原始版本中divs的显示方式）：

http://jsfiddle.net/6v9fyg2g/8/

http://jsfiddle.net/6v9fyg2g/9/

使用正确的高度定位绝对/相对包装div？

1 个答案: