Javascript CSS响应绝对div内相对div

我对CSS比较陌生，我正在尝试构建一个原型，在这个原型中，我有一个大的Div，在一个特定的位置有几个Div。我希望这些部门总是占据那个位置，但我希望它能做出反应

在尝试了一些不同的东西之后，我的代码到处都是，但是黄色的div就是我想要做的。我希望以循环方式放置所有其他div，但希望它们始终使用父div的%空间并收缩，但保持与父div相同的相对位置

var openSide=false； 功能侧{ 如果！开赛{ document.getElementByIdmain.style.marginLeft=15%； document.getElementByIdmain.style.paddingLeft=10px； document.getElementByIdmySidebar.style.width=15%； document.getElementByIdmySidebar.style.display=block； //document.getElementByIdopenNav.style.display='无 openSide=true； }否则{ document.getElementByIdmain.style.marginLeft=0%； document.getElementByIdmySidebar.style.display=none； document.getElementByIdopenNav.style.display=内联块； openSide=false； } console.logepuside； } /*侧边栏菜单*/ .侧导航{ /*/高度：100%；/*全高：如果需要自动高度，请删除此选项*/ 宽度：15%； /*设置侧边栏的宽度*/ 位置：固定； /*固定侧边栏停留在滚动的地方*/ z指数：1； /*保持领先*/ 排名前70名； /*保持领先*/ 左：0； 背景色：111； /*黑色的*/ 溢出x：隐藏； /*禁用水平滚动*/ 填充顶部：20px； 显示：无； 左边距：10px； } /*导航菜单链接*/ .侧导航a{ 填充：6px 8px 6px 16px； 文字装饰：无； 字体大小：25px； 颜色：818181； 显示：块； } /*将鼠标悬停在导航链接上时，请更改其颜色*/ .侧导航a:悬停{ 颜色：F1F1； } /*样式页内容*/ 主要{ 左边缘：0%； /*与侧边栏的宽度相同*/ 右边距：15%； 左侧填充：10px； 右边填充：20px； } 身体{ 左边距：10px； } .柔性容器{ 显示器：flex； 背景色：淡蓝色； } .flex容器>div{ 背景色：红色； 利润率：10px； 填充：20px； 字体大小：30px； } 地图{ /*填充：100px 100px 100px 100px*/ 位置：相对位置； 宽度：100%； 高度：600px； 顶部：100px； 背景：黄色； } .媒体{ 位置：绝对位置； 宽度：11.07%； 身高：16.66%； 背景色：红色； } .媒体：第一个孩子{ 利润率最高：15； } m1{ 背景：蓝色； 左：400px； 顶部：400px； } .媒体：悬停{ 背景颜色：粉红色； z指数：1000； 宽度：200px； 高度：200px； } /*在高度小于450px的较小屏幕上，更改侧边栏的样式，减少填充，减小字体大小*/ @媒体屏幕和最大高度：450px{ .侧导航{ 填充顶部：15px； } .侧导航a{ 字号：18px； } } &9776; 1. 2. 3. H G F E D C B A. 页脚

---

正如其他评论者所指出的，在这里使用%来表示所包含元素的位置和维度是一种很好的方法

您还可以使用vmin来确定.container的宽度和高度，以确保无论是水平还是垂直缩小视口，它都保持整体可见

工作示例：

.集装箱{ 位置：相对位置； 宽度：100vmin； 高度：100V分钟； 背景颜色：黄色； } .货柜组{ 位置：绝对位置； 宽度：6%； 身高：9%； 转化：translateX-50%； } .a{ 最高：60%； 左：50%； 背景颜色：蓝色； } .b{ 最高：52%； 左：40%； 背景色：红色； } c{ 最高：44%； 左：30%； 背景颜色：绿色； } 博士{ 最高：36%； 左：40%； 背景颜色：蓝色； } e{ 最高：28%； 左：50%； 背景色：红色； } f{ 最高：36%； 左：60%； 背景颜色：绿色； } g{ 最高：44%； 左：70%； 背景颜色：蓝色； } h{ 最高：52%； 左：60%； 背景色：红色； }

---

不要使用px来放置元素。使用%，因此它们将适应父分区的维度。顶部：20%；左：40%；你想让它响应，但你使用的是绝对单位-我会阅读绝对单位和相对单位如果你试图将元素居中，flexbox是你最好的朋友。我的问题是如果我将div放在中间，黄大DIV收缩，但div不停留在中间，但总是在原来的地方。我从PX开始，但后来变为%，仍然无法实现我想要的。div会调整大小，但不会跟随@我试过了，但我不想让他们在中间，我想让他们围成一个圈