這里紅色框是沒有設(shè)置任何溢出屬性的父div。橙色和灰色的盒子是它的孩子。我想知道的是，一個(gè)孩子是否有可能溢出另一個(gè)孩子不溢出？.rootdiv { width: 300px; height: 300px; background: red; border: solid; position: relative; overflow: hidden;}.rootdiv .not-overflow { border: dashed; background: orange; position: relative; left: 20px;}.rootdiv .must-overflow { border: dashed; background: gray; position: relative; top: 20px; left: 20px;}<div class="rootdiv"> <div class="not-overflow"> This must get chopped. </div> <div class="must-overflow"> This must overflow. </div></div>
4 回答
暮色呼如
TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超9個(gè)贊
我為 main 添加了溢出<div>，并用于應(yīng)該溢出的position:absolute內(nèi)容.must-overflow：
.rootdiv {
width: 300px;
height: 300px;
background: red;
border: solid;
overflow: hidden;
}
.rootdiv .not-overflow {
border: dashed;
background: orange;
position: relative;
left: 20px;
}
.rootdiv .must-overflow {
border: dashed;
background: gray;
position: absolute ;
top: 50px;
left: 30px;
width: 400px;
}
<div class="rootdiv">
<div class="not-overflow">
This must get chopped.
</div>
<div class="must-overflow">
This must overflow.
</div>
</div>
紅糖糍粑
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊
問題是溢出是相對(duì)于它的子級(jí)的，所以如果你只想有一個(gè)父級(jí)分區(qū)，那么它要么是其中之一，要么是另一個(gè)。
所以僅用一個(gè)包裝器分區(qū)是無法實(shí)現(xiàn)這種效果的。然而，當(dāng)你添加第三個(gè)時(shí)，它就非常簡(jiǎn)單了。看一下例子
.bigDiv {
background: red;
height: 50vh;
width: 50vw;
border: 5px solid black;
}
.bigDiv div div {
margin-top: 5vh;
width: 75vw;
border: 3px dashed black;
}
.divOne {
overflow: hidden;
}
.chop {
background: orange;
}
.overflow {
background: lightgray;
}
<div class="bigDiv">
<div class="divOne">
<div class="chop">
<p>this must get chopped</p>
</div>
</div>
<div class="divTwo">
<div class="overflow">
<p>this must overflow</p>
</div>
</div>
</div>
和結(jié)果
www說
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超8個(gè)贊
使用帶有大 box-sahdow 的偽元素，并且可以控制 z-index，然后您可以輕松隱藏/取消隱藏您想要的溢出：
.rootdiv {
width: 300px;
height: 300px;
padding:3px;
background: red;
position:relative;
z-index:0;
}
.rootdiv:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border: solid;
box-shadow: 0 0 0 calc(100vw + 100vh) #fff;
z-index:0;
}
.rootdiv > div {
position: relative;
left: 20px;
margin:20px 0 0 20px;
border: dashed;
}
.rootdiv .not-overflow {
background: orange;
z-index:-1; /* will not overflow */
}
.rootdiv .must-overflow {
background: gray;
z-index:1; /* will overflow */
}
<div class="rootdiv">
<div class="not-overflow">
This must get chopped.
</div>
<div class="must-overflow">
This must overflow.
</div>
<div class="not-overflow">
This must get chopped.
</div>
<div class="must-overflow">
This must overflow.
</div>
</div>
縹緲止盈
TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊
width: 100%您可以使用和overflow: hidden要隱藏的位置創(chuàng)建父 div 。例如：
.rootdiv {
width: 300px;
height: 300px;
background: red;
border: solid;
position: relative;
/* overflow: hidden;*/
}
.rootdiv .not-overflow {
overflow: hidden;
width: 100%;
}
/* NOTE: just transformed the original "not-overflow" from the question to "styles" */
.styles {
border: dashed;
background: orange;
position: relative;
left: 20px;
}
/* end of changes */
.rootdiv .must-overflow {
border: dashed;
background: gray;
position: relative;
top: 20px;
left: 20px;
}
<div class="rootdiv">
<div class="not-overflow">
<div class="styles">This must get chopped.</div>
</div>
<div class="must-overflow">This must overflow.</div>
</div>
- 4 回答
- 0 關(guān)注
- 262 瀏覽
添加回答
舉報(bào)
0/150
提交
取消