Javascript 分区布局定位

我正在尝试完成以下布局：

我想要一个有四个方形连接的中心大脑。如果您将鼠标悬停在导航按钮的右侧，则应显示左右两侧的“宝丽来”。因此，如果您将鼠标悬停在图片中的第一个类似点上，第一个宝丽来左上角应该会出现

我尝试了以下div结构：

.html，
身体{
身高：100%；
}
.头衔{
字体系列：lato；
}
.主要内容{
宽度：100%；
浮动：左；
背景色：#fefdf9；
身高：100%；
}
.集装箱{
身高：100%；
宽度：100%；
保证金：0px自动；
}
.第页{
宽度：100%；
浮动：左；
填充：0px 0px 0px 0px；
}
.左上角{
背景色：#fefdf9；
宽度：35%；
浮动：左；
填充：0px 0px 0px 0px；
最小高度：1px；
}
.中上部{
背景色：#fefdf9；
宽度：30%；
浮动：左；
填充：0px 0px 0px 0px；
}
.右上角{
背景色：#fefdf9；
宽度：35%；
浮动：左；
填充：0px 0px 0px 0px；
最小高度：1px；
}
.内容{
宽度：100%；
浮动：左；
高度：自动；
填充顶部：8px；
}
.页脚{
背景色：#3838；
文本对齐：居中；
浮动：左；
位置：绝对位置；
右：0；
底部：0；
左：0；
填充：1rem；
保证金：自动；
}
.页脚文本{
字体大小：26px；
字体系列：“拉托黑体”；
颜色：rgb（255、79、78）；
}
.标题{
宽度：40%；
浮动：左；
最大高度：60px；
}
.收割台顶部{
宽度：100%；
浮动：左；
线高：0；
字体系列：“Lato-Thin”；
}
.头机器人{
宽度：100%；
身高：4%；
显示：内联；
字体系列：“拉托黑”；
字体大小：30px；
页边顶部：-5px；
}
.左{
宽度：37%；
最小高度：1px；
浮动：左；
空白：nowrap；
}
.左>右{
高度：50px；
宽度：100px；
背景:#555；
显示：内联块；
利润率：10px；
}
.中{
宽度：26%；
浮动：左；
保证金：自动；
高度：580px；
}
.对{
宽度：37%；
最小高度：1px；
浮动：左；
}
#h1{
边际：0px；
填充：0px；
}
img{
最大宽度：100%；
最大高度：100%；
图像渲染：清晰的边缘；
}
#威尔科曼文本{
字号：18px；
文本对齐：对齐；
}
.新闻{
位置：相对位置；
宽度：40%；
左：20%
}
.新闻img{
边框：10px实心#fff；
身高：100%；
溢出：隐藏；
最大高度：100%；
边框底部：45px实心#fff；
-网络工具包盒阴影：3px 3px 3px#777；
-moz盒阴影：3px 3px 3px#777；
盒影：3px 3px 3px#777；
}
.新闻{
位置：绝对位置；
文本对齐：居中；
宽度：100%；
底部：0px；
左：60px；
字体：40018px/1'Lato'，草书；
颜色：#888；
}
康塔克先生{
位置：相对位置；
宽度：40%；
左：25%；
利润率最高：-15%；
}
康塔克先生{
边框：10px实心#fff；
身高：100%；
溢出：隐藏；
最大高度：100%；
边框底部：45px实心#fff；
-网络工具包盒阴影：3px 3px 3px#777；
-moz盒阴影：3px 3px 3px#777；
盒影：3px 3px 3px#777；
}
康塔克先生{
位置：绝对位置；
文本对齐：居中；
宽度：100%；
底部：0px；
左：60px；
字体：40018px/1'Lato'，草书；
颜色：#888；
}
卡伦德先生{
位置：相对位置；
宽度：40%；
左：10%
}
卡伦德先生{
边框：10px实心#fff；
身高：100%；
溢出：隐藏；
最大高度：100%；
边框底部：45px实心#fff；
-网络工具包盒阴影：3px 3px 3px#777；
-moz盒阴影：3px 3px 3px#777；
盒影：3px 3px 3px#777；
}
卡伦德先生{
位置：绝对位置；
文本对齐：居中；
宽度：100%；
底部：0px；
左：60px；
字体：40018px/1'Lato'，草书；
颜色：#888；
}
安法特先生{
位置：相对位置；
宽度：40%；
左：5%；
利润率最高：-15%；
}
.Anfahrt img{
边框：10px实心#fff；
身高：100%；
溢出：隐藏；
最大高度：100%；
边框底部：45px实心#fff；
-网络工具包盒阴影：3px 3px 3px#777；
-moz盒阴影：3px 3px 3px#777；
盒影：3px 3px 3px#777；
}
.Anfahrt p{
位置：绝对位置；
文本对齐：居中；
宽度：100%；
底部：0px；
左：60px；
字体：40018px/1'Lato'，草书；
颜色：#888；
}
.left1{
宽度：10%；
背景色：白色；
最小高度：1px；
}
.left2{
宽度：10%；
背景色：白色；
最小高度：1px；
}
身体{
背景#f1f1；
填充：0；
保证金：0；
字体大小：小；
}
方形菜单{
字号：0；
列表样式类型：无；
列表样式：无；
填充：0；
字体系列：“Kavoon”，Helvetica，无衬线；
-webkit字体平滑：抗锯齿；
宽度：400px；
利润率：40px自动；
}
方形菜单{
浮动：左；
边际：0px；
}
方形菜单{
显示：块；
文字装饰：无；
填充：80px 60px；
颜色：白色；
字体大小：正常；
字体大小：150%；
宽度：60px；
高度：20px；
文本对齐：居中；
文本阴影：2px2px0pxRGBA（0,0,0,0.05）；
-webkit过渡：所有0.1都易于使用；
-ms转换：所有0.1秒都容易进入；
-moz转换：所有0.1秒都容易进入；
-o型过渡：所有0.1秒都容易进入；
过渡：所有0.1秒都容易进入；
}
ul.square-menu li a.slink-x{
背景图像：url（../images/navletup.gif）；
背景重复：否；
背景大小：100%；
}
ul.square-menu li a.slink-y{
背景图像：url（../images/NavRightUp.gif）；
背景重复：否；
背景大小：100%；
}
ul.square-menu li a.slink-z{
背景图像：url（../images/navletdown.gif）；
背景重复：否；
背景大小：100%；
}
方格菜单，方格菜单，方格菜单，方格菜单{
背景图像：url（../images/NavRightDown.gif）；
背景重复：否；
背景大小：100%；
}
方形菜单李a：悬停{
字号：26px；
a-moz变换：比例（1.2）；
-webkit转换：规模（1.2）；
-o变换：比例（1.2）；
转换：比例（1.2）；
-moz盒阴影：0px 0px 0px 5px rgba（0,0,0,0.12）；
-webkit盒阴影：0px 0px 0px 5px rgba（0,0,0,0.12）；
盒子阴影：0px 0px 0px 5px rgba（0,0,0,0.12）；
}

试验
测试头