时间戳

首页 > 解决方案 > 如何在某个容器中但相对于屏幕显示的 div 上应用 css

javascript - 如何在某个容器中但相对于屏幕显示的 div 上应用 css

问题描述

我创建了我的自定义模态，位置：固定并将此模态用于内容，但它不适用于屏幕其显示位置：相对于内容固定如何在屏幕中心的中心制作模态？

modal 被导入到内容中。

其中导航位置是固定的侧边栏位置是固定的内容位置是相对的并且模态位置已经固定但是模态的这个固定位置取它的父级而不是正文

问题：Modal 相对于其父级采用固定位置，但我需要针对 HTML body 标记应用模态。有什么方法可以应用这个吗？

不能将 modal 直接放到 body 中，因为它的创建方式是它会在哪里放置，它会自动用于绘制 wrto body

也使用父选择器

.overlay{
 animation: ${fadeIn} 200ms ease-out;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 999;
 background-color: ${(props) => props.theme.palette.greyScale[9]};
 }
body < parent(body) {
 position:relative;
}

不起作用。

这是结构：

在此处输入图像描述

标签： javascripthtmlcss

解决方案

我认为布局不正确。我建议以下布局和样式。把所有东西都放在一个容器里。我创建了一个带有示例布局的 jsfiddle。请看一看。让我知道是否有任何疑问 在此处输入图像描述

.container {
    background: lightgray;
    width: 100vw;
    height: 100vh;
    float: left;
    display: block;
    position: relative;
}
.nav-bar {
  widows: 100%;
  height:20%;
  background: gray;
}
.side-bar {
  width:20%;
  height: calc(100% - 20%);
  float: left;
  background: lightblue;
}
.content {
  width: calc(100% - 20%);
  background: red;
  float: left;
  height: calc(100% - 20%);
}
.modal {
  position: fixed;
  width: 200px;
  height: 150px;
  background: green;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
<div class="container">
  <div class="nav-bar">
    NavBar
  </div>
  <div class="side-bar">Side Bar</div>
  <div class="content">
  Content
    <div class="modal">
      Modal
    </div>
  </div>
</div>

推荐阅读