У меня есть 2 сложенных div: div1 содержит изображение круга, div2 содержит текст.Я бы хотел, чтобы div2 двигался вверх и всегда покрывал половину круга, т.е. верхний край div2 должен располагаться в центральной точке круга.Вот мой код:
.coverLower {
background: #e1ecf4;
margin-top: -235px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Circle-withsegments.svg/1200px-Circle-withsegments.svg.png" style="width: 100%"></img>
</div>
</div>
<div class="row">
<div class="col-md-12 coverLower">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>
</body>
</html>
Я вручную установил значение margin-top, чтобы оно работало в моем браузере с полноэкранным режимом, но проблема заключается в том, что при изменении размера экрана он становится уже, позиция больше не правильная.Угадайте, ручная установка этого неверна, как сделать так, чтобы позиция всегда корректно реагировала?