我有 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 设置为一个值以使其在我的浏览器中全屏工作，但问题是如果我将屏幕尺寸调整得更窄，位置将不再正确。猜猜手动设置这个是错误的，如何让位置始终响应正确？
最佳答案
你可以完全像下面这样定位 div:
.coverLower {
background: #e1ecf4;
position: absolute;
top: 50%;
}<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%" />
<div class="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>
</div>
</body>
</html>关于javascript - 响应地将 div 的上边缘定位在另一个 div 中的圆的中心点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55206738/