Css 基于视口的div更改定位

我试图在单击中心圆时显示4个圆，就像

但是，当我调整视口的大小时，div的位置会改变，如下面的代码所示。我试着让位置相对，但那不起作用

下面是有问题的代码：

.subOne{
    position: relative;
    top: -200px;
    left: 445px;
}

.subTwo{
    position: relative;
    top: -650px;
    left: 445px;
}

.subThree{
    position: relative;
    top: -570px;
    left: 255px;
}

.subFour{
    position: relative;
    top: -670px;
    left: 650px;
}

---

我的一个想法是将子圆圈包装在一个单独的容器div中，并根据视口转换容器，尽管我不确定这是否可行。

使用周围项目和像素定位的

位置：相对
，您将无法获得响应性布局

首先，使用，元素相对于其原始位置而不是中心圆进行定位。这会导致错位

第二，定位元素，顶部为：-670px；左：650px
在较宽的屏幕上看起来不错，但在较小的屏幕上却远远超出了视口。这也会打乱你的路线

相反，使用
位置：绝对
，将周围项目从正常流程中移除，使其相对于容器（使用
位置：相对
），并使用百分比长度进行适应性调整



$（文档）.ready（函数（）{
$（“.subOne”）.hide（）；
$（“.subTwo”）.hide（）；
$（“.subThree”）.hide（）；
$（“.subfur”）.hide（）；
$（“.maincycle”）.bind（'click'，function（）{
$（this.toggleClass（'blue'）；
$（“.subOne”）.slideToggle（'fast'）；
$（“.subTwo”）.slideToggle（'fast'）；
$（“.subThree”）.slideToggle（'fast'）；
$（“.subfur”）.slideToggle（'fast'）；
});
});
正文{
保证金：0；
}
.集装箱{
位置：相对位置；
}
.分包商{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
背景：珊瑚；
}
mainCircle先生，
苏伯恩先生，
.subTwo，
.次三级，
.子文件夹{
边框：2个红色实心；
高度：100px；
宽度：100px；
边界半径：100px；
背景：蓝色；
过渡：0.3s缓解所有；
}
苏伯恩先生{
位置：绝对位置；
最高：20%；
左：50%；
转换：转换（-50%，-50%）；/*有关解释，请参阅下面的链接*/
}
.subTwo{
位置：绝对位置；
底部：20%；
左：50%；
转换：翻译（-50%，50%）；
}
.次三线{
位置：绝对位置；
最高：50%；
左：20%；
转换：翻译（-50%，-50%）；
}
.子文件夹{
位置：绝对位置；
最高：50%；
右：20%；
转换：翻译（50%，-50%）；
}
.main循环：悬停{
背景：浅蓝色；
过渡：0.3s缓解所有；
}
蓝先生{
边框：10px黑色固体；
}

您可以使用百分比而不是像素来获得布局。但我会在标记上稍作更改，并使用如下包装flexbox：

将圆移动到伪元素及其悬停样式中

将一个圆圈放在第一行，三个圆圈放在第二行（包括
main圆圈
），一个圆圈放在最后一行-将
order
属性用于排序，将
flex basis
用于每行的圆圈数

您可以使用
margin:0 auto
使每个圆在其空间中居中。并加入
align content:space around
以实现统一对齐

现在，您可以通过改变
子容器的
高度和
宽度来调整相对距离

请参见下面的演示：


$（文档）.ready（函数（）{
$（“.subOne”）.hide（）；
$（“.subTwo”）.hide（）；
$（“.subThree”）.hide（）；
$（“.subfur”）.hide（）；
$（“.maincycle”）.bind（'click'，function（）{
$（this.toggleClass（'blue'）；
$（“.subOne”）.slideToggle（'fast'）；
$（“.subTwo”）.slideToggle（'fast'）；
$（“.subThree”）.slideToggle（'fast'）；
$（“.subfur”）.slideToggle（'fast'）；
});
});
正文{
溢出y：无；
}
.集装箱{
背景：珊瑚
}
.分包商{
显示器：flex；
对齐项目：居中；
证明内容：中心；
对齐内容：周围的空间；
柔性包装：包装；
高度：97vh；
高度：500px；/*调整此值*/
宽度：500px；/*调整此值*/
保证金：0自动；
背景：珊瑚；
}
mainCircle先生，
苏伯恩先生，
.subTwo，
.次三级，
.子文件夹{
flex:0自动；
}
.mainCircle:之后，
.苏伯恩：之后，
.第二部分：之后，
.次三级：之后，
.子文件夹：之后{
内容：''；
显示：块；
边框：2个红色实心；
高度：100px；
宽度：100px；
保证金：0自动；
边界半径：100px；
背景：蓝色；
过渡：0.3s缓解所有；
}
.main循环：悬停：之后{
背景：浅蓝色；
过渡：0.3s缓解所有；
}
蓝：之后{
边框：10px黑色固体；
}
苏伯恩先生{
顺序：1；
弹性基准：100%；
}
.subTwo{
顺序：2；
弹性基准：33.33%；
}
梅因Circle先生{
顺序：3；
弹性基准：33.33%；
}
.次三线{
顺序：4；
弹性基准：33.33%；
}
.子文件夹{
顺序：5；
弹性基准：100%；
}

该操作的原始视口的大小是多少？它的故障大小是多少？此设计对于移动视口的预期外观是什么？如果没有这些信息，似乎不可能回答这个问题；这真的很聪明，所以我仍在努力克服它。