时间戳

首页 > 解决方案 > 混合弹性盒和固定/绝对定位

css - 混合弹性盒和固定/绝对定位

问题描述

我有一个站点，在顶层我有几个组件，我希望它们能够响应。所以我把它们放在一个弹性盒子里。这些组件中的一个或多个我希望修复其中的项目。更具体地说，我的应用程序是一个纸牌游戏，所以我有一个游戏区、一个聊天区、一个记分板。我将这些放在弹性框中，聊天和记分板也有响应。但是我有固定或绝对位置的游乐区。我的问题是，当我使游戏区域固定或消除时，聊天区域和游戏区域都在 0,0 左右的同一个地方。我希望游戏区域中的 Coriates 相对于它的边界 Div 而不是视口。

如何设置顶级组件和子组件。

标签： css

解决方案

“我希望游戏区域中的 Coriates 相对于其边界 Div 而不是视口。”

您可以通过将“位置：相对”添加到父元素并将“位置：绝对”添加到子元素，使子元素相对于其父容器而不是视口进行绝对定位。这将使孩子相对于其父母定位。

我不确定您在寻找什么，但我希望这能提供一些指导，建议提供某种可以复制的代码，以便其他人可以更好地帮助您解决问题。

#parent {
  position: relative;
  width: 500px;
  height: 200px;
  background-color: blue;
}

#child {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 50px;
  background-color: red;
}
<div id="parent">
  <div id="child">child element</div>
</div>

推荐阅读