11

overflow:hiddenコンテナをセットしました。コンテナの内側にある要素の絶対位置を設定してコンテナの外側に表示したいのですが、オーバーフローが隠されているため表示されません。

overflow:hiddenコンテナにはたくさんの要素があるので、コンテナにを使用することが重要です。で動作させる方法はありoverflow:hiddenますか？

の親要素はwrapタグbodyであり、それに従って位置を決定するのは困難です。

HTML:

<div class="wrap">
    <div class="box">
        <span>Left</span>
        <div class="main"></div>
    </div>    
</div>

CSS:

.wrap{
    width: 500px;
    margin: 50px auto;
    border: 1px solid green;
    overflow: hidden;    /*causes the problem */
}

.box{
    position: relative
}

.main{
    width: 100px;
    height: 100px;
    background: green;
}

span{
    position: absolute;
    left: -50px;
}

デモ: http://jsfiddle.net/c55hS/

4

3 に答える 3

6

他の人が言ったように、直接的には不可能です。ただし、マークアップを変更する必要のない一種の回避策があります - から削除position:relativeし、絶対に配置された要素に.box設定せずleft、top代わりに負のマージンを使用して要素を必要な場所に配置します。

position:relativeから削除する必要があります。これ.boxを使用すると、スパンは絶対に相対的に配置され、境界.boxを逃れることができなくなります。overflow:hiddenこれがないと、本文に対して絶対的に配置され.box、負のマージンを使用してオーバーレイできます。

top、bottom、leftまたはを設定しないことが重要rightです。これにより、本体から設定された距離に配置されます。ただし、何も設定しない場合 ( all auto)、正しいインライン位置に表示されます。

.wrap{
    width: 500px;
    margin: 50px auto;
    border: 1px solid green;
}

.box{

}

.main{
    width: 100px;
    height: 100px;
    background: green;
}

span{
    position: absolute;
    background:red;
    margin-left:-50px;
}

http://jsfiddle.net/c55hS/5/

于 2013-09-03T09:58:25.653 に答える
2

少しハックですが、これでうまくいきます。

.inner-wrapあなたの中に追加する.wrap div

<div class="wrap">
    <div class="inner-wrap">

次に、に追加left-paddingし、下に.wrapシフトしますborder.inner-wrap

.wrap{
    width: 500px;
    margin: 50px auto;
    overflow: hidden;    /*causes the problem */
    padding-left:50px;
}
.inner-wrap {
    border: 1px solid green; 
}

デモ

于 2013-09-03T10:03:45.317 に答える
0

そうは思いません...要素をコンテナの外に置くだけでよいと思います...

代わりにここにあなたの要素を入れてください

 <div class="wrap">
   <div class="box">
     <span>Left</span>
     <div class="main"></div>
   </div>    
 </div>

Jsフィドル

于 2013-09-03T09:56:22.440 に答える