在几个父级中有一个红圈元素(elementToExtract),其结构应如下所示:
https://jsfidle.net/dwxmb87l/1/
null
#main {
top: 17px;
left: 32px;
position: absolute;
overflow: hidden;
}
#yellow {
display: inline-block;
transform: translate(0px, 0px) translateZ(0px);
position: relative;
width: 240px;
background: yellow;
}
#scroller {
}
#someDiv {
}
#lightblue {
position: relative;
width: 220px;
height: 200px;
margin: 10px;
background: lightblue;
overflow: hidden;
}
#elementToExtract {
width: 30px;
height: 30px;
border-radius: 30px;
position: fixed;
top: 0;
right: -15px;
background: red;
}
<div id="main">
<div id="yellow">
<div id="scroller">
<div id="someDiv">
<div id="lightblue">
<div id="elementToExtract"></div>
</div>
</div>
</div>
</div>
</div>
null
我如何提取它以显示在所有元素上(而不是由于溢出而被切成两半),而不:
所以基本上,如果可能的话,只能通过修改ElementToExtract的CSS。如果绝对不可撤销,则对其他元素进行一些小的修改,但要注意条件2
更新:仅更改父级宽度
我试着尽可能少地改变。
null
#main {
top: 17px;
left: 32px;
position: absolute;
overflow: hidden;
width: 300px; /* added this line only */
}
#yellow {
display: inline-block;
transform: translate(0px, 0px) translateZ(0px);
position: relative;
width: 240px;
background: yellow;
}
#scroller {}
#someDiv {}
#lightblue {
position: relative;
width: 220px;
height: 200px;
margin: 10px;
background: lightblue;
overflow: hidden;
}
#elementToExtract {
width: 30px;
height: 30px;
border-radius: 30px;
position: fixed;
top: 0;
right: -15px;
background: red;
}
<div id="main">
<div id="yellow">
<div id="scroller">
<div id="someDiv">
<div id="lightblue">
<div id="elementToExtract"></div>
</div>
</div>
</div>
</div>
</div>