Javascript 如何使一个div在不将其他div推开的情况下随窗口大小调整而移动？

我花了很长时间试图让它工作

我有一个叫做“RightExtra”的部分，里面有一个叫做“RightExtraContent”的div。我试图使这两个div在窗口调整到某一点时可以自由移动，而不会影响任何其他div的位置

以下是我的意思的直观解释：

这是小提琴：

我尝试了许多不同的代码组合，但仍然没有成功

*{
填充：0；
保证金：0；
}
html{
背景：#1e；
/*背景色1*/
}
身体{
背景色：#1E；
/*背景：url（'https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a{
颜色：#FFFFFF；
文字装饰：无；
}
a:主动，
a:悬停{
文字装饰：下划线；
}
诺拉先生{
文字装饰：无；
}
/*这些幻想不起作用*/
a:悬停{
文字装饰：无；
}
/*这些幻想不起作用*/
#兴奋的{
文本对齐：居中；
宽度：100%；
高度：75px；
背景色：#1E；
/*背景色2*/
字体系列：Tahoma；
字体大小：16px；
颜色：#000000；
位置：相对位置；
边缘底部：30px；
}
#包装纸{
文本对齐：居中；
宽度：1000px；
身高：100%；
左边距：自动；
右边距：自动；
/*背景色：#底色3*/
字体系列：Tahoma；
字体大小：16px；
位置：相对位置；
}
#右外{
背景色：无；
宽度：500px；
浮动：对；
左边距：自动；
右边距：自动；
位置：相对位置；
}
#右外内容{
字体系列：Tahoma；
字体大小：16px；
高度：800px；
宽度：300px；
颜色：白色；
背景色：#3434；
文本对齐：居中；
边界半径：30px；
位置：固定；
浮动：对；
}
#跟屁虫{
位置：固定；
底部：0；
左：0；
右：0；
高度：180像素；
背景色：无；
文本对齐：居中；
/*显示：无*/
}
#杂志{
背景色：#739FE0；
边框颜色：#739FE0；
边框样式：实心；
边框宽度：2倍；
边界半径：20px；
线高：10px；
文本对齐：居中；
左边距：8px；
光标：指针；
}
#费蒂{
文本对齐：居中；
宽度：100%；
高度：0px；
//100px背景色：深蓝色；
/*背景色4*/
字体系列：Tahoma；
字体大小：16px；
颜色：白色；
位置：固定；
//将其更改为“相对”会使followfoot在滚动足够长的时间后消失。
}
.向上{
/*背景色：#底色5*/
填充顶部：30px；
边缘底部：50px；
高度：90px；
}
.注册{
背景色：#ccc；
边框宽度：1px；
边框颜色：#ccc；
边界半径：10px；
宽度：75px；
填充：0px 0px；
左边距：30px；
文本对齐：居中；
浮动：对；
}
/*clearfix*/
/**
*适用于现代浏览器
* 1. 空间内容是避免Opera错误的一种方法，当
*contenteditable属性包含在文档中的任何其他位置。
*否则，它会在元素的顶部和底部显示空间
*那是固定的。
* 2. 只有在使用时才需要使用“table”而不是“block”
*`:before`包含子元素的上边距。
*/
.cf：之前，
.cf：之后{
内容：“；
/* 1 */
显示：表格；
/* 2 */
}
.cf：之后{
明确：两者皆有；
}
.cf{
*缩放：1；
}
导航栏{
边框样式：实心；
边框宽度：1px；
边框颜色：#739FE0；
宽度：100px；
/*宽度变换器1*/
边界半径：4px；
左边距：0px；
右边距：0px；
字体大小：14px；
高度：33像素；
}
ul.navbar li a.ActiveListItem{
颜色：白色；
！重要；
背景色：#222！重要；
填充：7.5px0px！重要；
字体大小：正常！重要；
左边距：0px；
/*Widthchanger2，以这种方式获取以列表文本为中心的activeitem*/
右边距：0px；
边界半径：4px；
高度：18px；
宽度：100px；
/*文本的宽度有点乱*/
边缘底部：1px；
}
李纳瓦尔{
位置：相对位置；
宽度：100px；
/*更改实际列表的宽度*/
}
李娜{
显示：块；
颜色：白色；
填充：10px 5px；
文字装饰：无；
过渡：所有.1都很容易进入；
}
李娜：悬停，
ul.navbar li：悬停>a{
/*背景：黑色*/
背景#739FE0；
颜色：#FFFFFF；
/*字号：600*/
/*边框底色：#FFFFFF；
边框底部样式：实心*/
/*边框颜色：#FFFFFF；
边框样式：实心；
边框宽度：1px*/
}
navbar li保险公司{
边际上限：0px；
/*控制从listdropdown到listchooser的空间*/
位置：绝对位置；
背景：#222；
字体大小：14px；
/*最小宽度：200px*/
显示：无；
z指数：99；
盒影：嵌入0像素3像素rgba（0,0,0,6），0像素10像素rgba（0,0,0,6）；
}
ol,，
保险商实验室{
列表样式：外部无；
}
.隐藏{
显示：无；
}
/*李斯特*/
表单{}.lister输入{
宽度：235px；
/*todo输入框的宽度*/
高度：33像素；
左侧填充：10px；
右边填充：10px；
边框宽度：1px；
边框样式：实心；
边框颜色：#739FE0；
浮动：左；
边缘底部：20px；
字体大小：14px；
字体系列：“Tahoma”；
背景色：#222；
颜色：白色；
}
.lister输入：焦点{
大纲：无；
边框颜色：#739FE0；
/*ccc*/
盒影：0px 0px 7px 0px#739FE0；
}
李斯特先生{
/*列表样式：内部为方形*/
填充：10px 0px 55px 0px；
/*列表外部区域的填充*/
/*这是不使用时可以看到的，以前是10*/
/*高度：50px*/
/*背景：#0f705d；深色*/
背景：无；
/*宽度：100%*/
字体系列：“Tahoma”；
}
.主动{
文本对齐：居中；
}
.不活跃{
显示：无；
}
李斯特先生{
字体大小：14px；
/*列表项的字体大小*/
/*字号：600*/
颜色：#181818；
/*字体颜色d5faf3*/
显示：内联块；
/*这使项目并排排列，而不是列*/
填充：9px；
边缘底部：5px；
/*九月