1

次のDIV構造を検討してください。

<style>
#content{float:left;width:100%;}
#overlay{position:absolute;z-index:100;}
</style>

<body>
    <div id="header">header</div>
    <div id="overlayBox">
        <div id="overlay">
            I want to overlay #content. 
            If my height is greater than
            #content, I don't want to 
            spill onto other elements. 
            I want to push them away.
        </div>
    </div>
    <div id="content">content</div>
    <div id="footer">footer</div>
</body>

この例では、次のことを行います。

高さがより高くなった場合は押し#headerて#footer離します#overlay#content

このDIV構造が完全に間違っている場合でも、必要性を説明するためにのみ使用されています。

これは私が抱えている問題の良い例です：http： //jsfiddle.net/Udqkc/

4

1 に答える 1

1

さて、に移動#contentしました#overlayBox：

    <div id="overlayBox">
        <div id="overlay">
            I want to overlay #content. 
            If my height is greater than
            #content, I don't want to <br />
            spill onto other elements. <br />
            I want to push them away.
        </div>
        <div id="content">content</div>
    </div>

わずかに変更された CSS:

#overlay {float:left;}
#overlayBox {overflow:hidden;}
#content {position:absolute;}​

作業例 - http://jsfiddle.net/nKwQF/14/

これが役に立てば幸いです。移動できるかどうかわかりません#content

于 2012-10-09T07:38:48.997 に答える