将元素完全隐藏在另一个元素下

Question

我有两个尺寸相同的元素，一个（灰色）在另一个（黄色）之上，但我不断显示底部元素的一些像素

body{
  background:#31313a
}

.bottom{
    position:relative;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    border: solid 8px #ff9800;
}

.top{
  position: absolute;
  width: 90px;
  height: 90px;
  border: solid 8px #3e4148;
  border-radius: 50%;
  top: -8px;
  left: -8px;
}

<div class='bottom'>
  <div class='top'>
  
  </div>
</div>

你能帮我把底部元素（黄色）完全放在顶部元素（灰色）下面吗？

ps：我在 Ubuntu 99.0（64 位）上使用 Firefox，这是我得到的截图：

Answer 1

只是需要稍微调整一下，边框使用10px，定位使用-9px。

body {
  background: #31313a
}

.bottom {
  position: relative;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  border: solid 8px #ff9800;
}

.top {
  position: absolute;
  border: solid 10px #3e4148;
  border-radius: 50%;
  top: -9px;
  bottom: -9px;
  left: -9px;
  right: -9px;
}

<div class='bottom'>
  <div class='top'>

  </div>
</div>

将元素完全隐藏在另一个元素下

hide element completely under another element

css