位置模态相对元素背景IONIC

【问题标题】：Position modal relative element background IONIC位置模态相对元素背景IONIC
【发布时间】：2023-03-12 01:55:02
【问题描述】：

可以相对于背景中的元素定位模态，例如，如果有一个元素高于模态出现在上方，如果元素在中间，则模态定位在中间或中间元素所在的地方。

我尝试通过媒体查询来解决它，但它仅限于 iPhone 的设备，设备范围更小，但对于 android，它更复杂，我需要它准确且不因设备而异

// IOS
@media screen and (max-height: 720px) {
  ::ng-deep .ios .modal-custom {
    top: -7.6 rem;
  }
}

// APK
@media screen and (max-height: 720px) {
  ::ng-deep .md .modal-custom {
    top: -3 rem;
  }
}

【问题讨论】：

标签： css angular ionic-framework

【解决方案1】：

可以相对于背景中的元素定位模态，例如，如果有一个元素高于模态出现在上方，如果元素在中间，则模态定位在中间或中间元素所在的地方

为此，您可以在背景元素上使用position relative，在模态元素上使用position absolute。

*{
padding:0;
margin:0;
box-sixing: border-box;
}

.parent{
position: relative;
border: 1px solid red;
width:10rem;
height: 10rem;

}

.child{
position: absolute;
border: 1px solid blue;
/* For centering the child relative to it's parent */
top:50%;
left:50%;
transform: translate(-50%, -50%);

}

<div class="parent">
<h5 class="child">Hello I'm Modal</h5>
</div>

【讨论】：