オーバーフロー

Question

私は非常に特定の要件を持って、親divはabsolute positionでabsolute:positionと子divであると親divに私は隠されますdiv子のoverflow:hiddenので、余分なwidthを持っていますが、これは動作していない、私は親divは、position:relativeでなければならないと知っているが、私のコードの現在の構造として、私は親を変更することはできませんdivpositionabsoluteからrelativeから、これを扱う方法がある？

ここで例のJSfiddleです。明るい赤いボックスを親の下に隠しておきたいので、divの子であるdivが親の中にあるようにします。ここで

が私のコードである

.wrapper { 
 
    position: absolute; 
 
    left: 100px; 
 
    top: 100px; 
 
    width: 400px; 
 
    height: 350px; 
 
    background: #666666; 
 
    padding: 10px; 
 
} 
 
.wrapper-inner { 
 
    position: absolute; 
 
    width: 450px; 
 
    height: 380px; 
 
    background: #fecccc; 
 
}

<div class="wrapper"> 
 
    <div class="wrapper-inner"> 
 
    Content goes here 
 
    </div> 
 
</div>

Answer 1

あなたの要件ごとに、このコードをチェックしてください：

.wrapper { 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 400px; 
    height: 350px; 
    background: #666666; 
    padding: 10px; 
    overflow: hidden; 
} 

Answer 2

をあなたはwrapperクラスでoverflow:hiddenを追加するために逃しているように見えます。

.wrapper{position:absolute; left:100px; top:100px; width:400px; height:350px; background:#666666; padding:10px; overflow:hidden;} 
 
.wrapper-inner{position:absolute; width:450px; height:380px; background:#fecccc;}

<div class="wrapper"> 
 
\t <div class="wrapper-inner"> 
 
    \t Content goes here 
 
    </div> 
 
</div>

Answer 3

私はあなたの条件を誤解していない限り、あなたは子のdivを表示したくない私のfiddle

.wrapper{position:absolute; left:100px; top:100px; width:400px; height:350px; overflow:hidden; background:#666666; padding:10px;} 
 
.wrapper-inner{position:relative; width:100%; height:100%; background:#fecccc; overflow-y:scroll;}

<div class="wrapper"> 
 
\t <div class="wrapper-inner"> 
 
    \t Content goes here Content goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here 
 
    </div> 
 
</div>

Answer 4

をチェックしてください延長するo親部門を呼び出すあなたはoverflow:hiddenと言っていますが、それは実際にあなたのフィドルには存在しません。 .wrapperクラスに追加することは、私があなたの必要と考えるものを達成しているようです。

Answer 5

DEMO

CSS

.wrapper-inner { 
    position: absolute; /* positioned wrt it parent */ 
    top:10px; /* account for 10px padding in parent */ 
    bottom:10px; 
    left:10px; 
    right:10px; 
    /* width: 450px; 
    height: 380px; */ 
    background: #fecccc; 
} 

Answer 6

あなたは親ラッパーにoverflow:hiddenを逃した：要するに

.wrapper { 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 400px; 
    height: 350px; 
    background: #666666; 
    padding: 10px; 
    overflow: hidden 
} 

.wrapper-inner { 
    position: absolute; 
    width: 450px; 
    height: 380px; 
    background: #fecccc; 
} 

は、あなたがあなた自身の質問に答えていました！ :)