這里紅色框是沒有設置任何溢出屬性的父div。橙色和灰色的盒子是它的孩子。我想知道的是，一個孩子是否有可能溢出另一個孩子不溢出？.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貢獻1853條經驗 獲得超9個贊
我為 main 添加了溢出<div>，并用于應該溢出的position:absolute內容.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貢獻1815條經驗 獲得超6個贊
問題是溢出是相對于它的子級的，所以如果你只想有一個父級分區，那么它要么是其中之一，要么是另一個。
所以僅用一個包裝器分區是無法實現這種效果的。然而，當你添加第三個時，它就非常簡單了?？匆幌吕?/p>
.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>
和結果
www說
TA貢獻1775條經驗 獲得超8個贊
使用帶有大 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貢獻2041條經驗 獲得超4個贊
width: 100%您可以使用和overflow: hidden要隱藏的位置創建父 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 關注
- 238 瀏覽
添加回答
舉報
0/150
提交
取消