使用CSS创建蜘蛛图/思维导图

我试图在CSS中实现“蜘蛛图”或“思维导图”

基本上，我想要的是一个围绕着中央盒子的盒子环

理想情况下，这些都是div，我可以在我认为合适的情况下添加更多/更少的内容（希望可以使用JS进行操作）。它们不需要拖拽或类似的东西

与图表不同的是，它们不需要从外部主题到思维导图名称的灰线等——我真的不在乎这一点

首先，我真的不知道从哪里开始。我想我必须对每个盒子使用绝对定位？如果我的观众使用相同的分辨率和浏览器，这可能不会太糟糕，但情况并非总是如此

所以，我真正的问题是，如何设置这样的div，使其在不同分辨率和不同浏览器中保持在同一位置？我可以在相对对齐的DIV内使用绝对定位吗

我需要支持的浏览器主要是IE10、Chrome和Safari。所以我想我应该设计IE10作为基础

---

提前感谢，

创建固定宽度/高度的div，并将其他div放置在那里

<div style='width: 1000px; height: 1000px; position: relative;'>
    <div class='note' style='position: absolute; left: 50px; top: 50px;'></div>
    <div class='note' style='position: absolute; left: 150px; top: 150px;'></div>
    <div class='note' style='position: absolute; left: 350px; top: 350px;'></div>
</div>

---

由于包装器的宽度是恒定的，所以无论浏览器窗口大小，内部元素都将保持在相同的位置。

它还与

%

一起工作，用于

宽度、左、右、下和
上，因此您可以确保它占据整个屏幕，并保持在相同的相对位置，无论大小（你可能会在小屏幕上看到内部div的重叠），你只需要确定高度。@Math正如你所说的-它可能会相互重叠，这不是期望的效果。这就是为什么我没有提出它作为一个答案，只是作为一个替代方案，因为有些人（像我一样）不喜欢创建固定长度的页面。如果我们可以访问小屏幕，可以防止重叠。