我只是试图使用flexbox在彼此之间堆叠一些大小不同的div。我真的很好奇为什么它可以在Chrome / Firefox中运行而不能在Safari中运行：
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>
.container {
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
position: absolute;
}
.inner-one {
width: 13rem;
height: 13rem;
border-radius: 50%;
background-color: green;
}
.inner-two {
width: 11rem;
height: 11rem;
border-radius: 50%;
background-color: purple;
}
在这里查看JSFiddle：https ://jsfiddle.net/19n95exf/3/
因为position: absolute;break display: flex，transform: translate改用
.container {
position: relative;
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
}
.container div {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.inner-one {
width: 13rem;
height: 13rem;
background-color: green;
}
.inner-two {
width: 11rem;
height: 11rem;
background-color: purple;
} <div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>或者给内部元素一个左/上值
.container {
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
border-radius: 50%;
position: absolute;
}
.inner-one {
left: 1.5rem;
top: 1.5rem;
width: 13rem;
height: 13rem;
background-color: green;
}
.inner-two {
left: 2.5rem;
top: 2.5rem;
width: 11rem;
height: 11rem;
background-color: purple;
}<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句