Обработка перекрытия div

Question

Я хочу, чтобы внутренняя часть красного круга была белой, в то время как перекрывалась с синим кругом и прозрачна для остальных, чтобы вы могли видеть зеленый цвет.

Я был бы рад, если бы кто-то знал, как с этим справиться.

#bigCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: rgba(0,0,250,0.5);
}

.smallCircle {
    margin-top: -244px;
    margin-left: 1px;
    border: solid rgb(226, 85, 20);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color:rgba(255,255,255,0);
  }

        <div id="bigCircle">
                <div id="middleCircle">
                    <div class="smallCircle" />
                </div>
        </div >

Answer 1

Рассмотрите radial-gradient как фоновую окраску, которую вы делаете фиксированной и имеющую ту же позицию, что и синий круг:

#bigCircle,
#middleCircle{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
  width: 240px;
  height: 240px;
  background-color: rgba(0, 0, 250, 0.5);
}

.smallCircle {
  margin-top: -244px;
  margin-left: 1px;
  border: solid rgb(226, 85, 20);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition:1s all;
  background:radial-gradient(circle 120px at 190px 190px,#fff 99%,transparent 100%) fixed;
}
#middleCircle:hover .smallCircle {
  margin-top: -100px;
}
body {
  margin:0;
}

<div id="bigCircle">
  <div id="middleCircle">
    <div class="smallCircle" ></div>
  </div>
</div>

Answer 2

#bigCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background-color: rgba(0, 0, 250, 0.5);
}

.smallCircle {
  margin-top: -242px;
  margin-left: 1px;
  border: solid rgb(226, 85, 20) 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  position: relative;
}

.smallCircle:after {
  display: block;
  content: '';
  border: solid rgb(226, 85, 20) 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  clip-path: circle(120px at 50% 130px);
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: -3px;
  left: -3px;
}

<div id="bigCircle">
  <div id="middleCircle">
    <div class="smallCircle">
    </div>
  </div>
</div>

Answer 3

Если я понял ваш вопрос, то, возможно, это поможет.

css

#bigCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background-color: rgba(11, 122, 30, 0.8);
}

#middleCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: rgba(0,0,250,0.5);
}

.smallCircle {
    margin-top: -244px;
    margin-left: 1px;
    border: solid rgb(226, 85, 20);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color:rgba(255,255,255,0);
  }