CSS делает внешний элемент фиксированной ответственности - PullRequest
Новая
       7

CSS делает внешний элемент фиксированной ответственности

0 голосов
/ 04 октября 2019

Я создал 2 круга images-img 

<div class="circle">
  <div class="circle-image">
    <img class="outer-circle" src="https://via.placeholder.com/190/008000" />
    <img class="outer-circle-image" src="https://via.placeholder.com/60/00F000" />
</div>

Добавлена ​​позиция относительно первого элемента и абсолютная относительно второго, так что один остается над другим. 

.outer-circle{
  position:relative;
  border-radius: 50%;
 }

.outer-circle-image{
   position:absolute;
   border-radius: 50%;
   left: 10%;
   top: 40%;
   transform: translateX(10%);
 }

1 кубик лежит награница на большой частице.

Проблема: если я поиграю с размером окна просмотра, маленькая рамка границы просто плавает вокруг, и я хочу закрепить ее на нижней границе большого круга.

http://jsfiddle.net/u3mybo8j/

1 Ответ

0 голосов
/ 04 октября 2019

position: relative; должен быть передан вашему родительскому классу, который равен circle-image. Пожалуйста, найдите фрагмент кода ниже 

.circle-image {
  position: relative;
  display: inline-block;
}

.outer-circle {
  border-radius: 50%;
}

.outer-circle-image {
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 30px);
  bottom: calc(50% - 30px);
}
<div class="circle">
  <div class="circle-image">
    <img class="outer-circle" src="https://via.placeholder.com/190/008000" />
    <img class="outer-circle-image" src="https://via.placeholder.com/60/00F000" />
  </div>
</div>
...