html - 即使使用 z-index，扩展的 div 也会将其他 div 推开

Question

尝试在一个页面上显示 20 strip 有详细信息的消息。详细信息是固定的。该消息可以从无到大约 240 个字符不等。想要显示消息的第一部分，然后在悬停时显示其余部分。

我可以很好地做到这一点，但是当消息框展开时，它会将其他框推开。我已经研究了很多并在这里查看了答案但是......

  <style>
        #bigboy {
            width:100%;
        }
        #boxout {
            width:200px;
            background-color: red;
            height:150px;
            margin:10px;
            float:left;
        }
        #boxout:hover {
            height:inherit;
            min-height:150px;
        }
        #boxin {
            width:180px;
            background-color: white;
            margin:10px;
            right:10px;
            font-size:1em;
            border:1px;
            overflow:hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            height: 130px;
            line-height: 1.8em;
        }
        #boxin:hover {
            word-wrap: initial;
            overflow: visible;
            height: inherit;
            min-height:130px;
            line-height: 1.8em;
            clear:both;
        }
    </style>
     <div id="bigboy">
        <div id="boxout">
            <div id="boxin">1</div>
        </div>
        <div id="boxout">
            <div id="boxin">22 22 22 22 22 22 22 22 22 2222 22222 22 22 22 22 22 22 2222 22222 22
                22 22 22 22 2222 22222 22 22 222 22 22 22 22 22 22 2222 22222 22 22 22
                22 22 2222 22222 22 22 22 22 22 2222 222"</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
    </div>

2 号框中有文本。我正在为 CSS 而苦苦挣扎。全屏显示:http://jsfiddle.net/stevehomer/DyV79/ ，可在此处编辑 http://jsfiddle.net/stevehomer/DyV79/ .

我也会对如何 float 消息并使整个消息群居中感兴趣，但这并不重要。

Answer 1

让您走上正确道路的最简单方法是创建一个单独的示例，因此希望您能够将其应用到您自己的布局中。

Check the example here on jsFiddle

要注意的最重要的一点是，为了阻止一个元素影响文档流中的其他元素，它需要应用 position: absolute。我在 jsFiddle 代码中包含了一些注释，它们应该可以填补其他空白。

编辑:

要使所有元素居中，您可以在整个组周围包裹一个 div(我们称之为 div id="wrapper"，将所有框设置为 display: inline-block，并将 text-align: center 应用于 #wrapper。Example of that here。或者如果您只想将整个组(让框像往常一样从左到右显示)，你需要给你的 #wrapper 一个 width，然后设置它的 margin-left 和 margin-right 到 auto。Example of that here(添加边框使其更清晰)。