Javascript 使div与其他4个div水平重叠，并在页面上伸展（高度100%？）

因此，我有4个不同的div，其中有按钮，我正在尝试设置，以便在单击其中一个按钮时，它将与页面上的其他div重叠

我知道它与z-index和div的定位有关，但我想它需要添加到Jquery而不是CSS

我已经检查了前面的代码，其中div垂直重叠。这是代码：

$（'#divleft，#divmid，#divright'）。切换（函数（）{
var cfg={高度：'200'，宽度：'100%}；
$（this.css（{'z-index'：100}）；
var pct=$（this.css（'left'）.split（'p'）[0]/$（document.width（））；
如果（pct 0）{
cfg.left='0'；
$（此）.data（'oldLeft'，'33%”）；
}其他条件（第33部分）{
cfg.left='0'；
$（此）.data（'oldLeft'，“66%”）；
}
$（此）.animate（cfg）
}，函数（）{
var cfg={高度：'200'，宽度：'33%，'z-index'：1}；
if（$（this）.data（'oldLeft'））{
log（$（this.data（'oldLeft'））；
cfg.left=$（this.data（'oldLeft'）；
}
$（此）.animate（cfg）
})

#左分{
宽度：33.3%；
高度：200px；
背景：#ccc；
z指数：1；
边缘顶部：10px；
位置：绝对位置；
左：0；
}
#迪夫米德{
宽度：33.3%；
高度：200px；
背景：#696；
边缘顶部：10px；
z指数：1；
位置：绝对位置；
左：33%；
}
#分权{
宽度：33.3%；
高度：200px；
背景：#000；
边缘顶部：10px；
z指数：1；
位置：绝对位置；
左：66%；
}

点击我

[EDIT]：在关闭html文档的body标记之前包含jquery，然后编写javascript。例如：

$（'.btn'）。单击（函数（）{
$（this.parent（）.addClass（“活动”）
})

[EDIT]：在关闭html文档的body标记之前包含jquery，然后编写javascript。例如：

$（'.btn'）。单击（函数（）{
$（this.parent（）.addClass（“活动”）
})

我认为你想要得到的更多的是相对高度和绝对定位，而不仅仅是

z-index

属性

单击元素

div

后，它必须覆盖父元素。为此，应将容器的

位置：相对
属性和增长元素设置为
位置：绝对
，将
高度
和
宽度
设置为100%，并将
顶部
和
左侧
与父级一致（设置为0）。该按钮位于该div内（
#first、#second、#third、#last
），因此它也必须是
高度：100%

最后，您只需设置
z-index
，以确保当前按钮重叠并覆盖显示的其他按钮


$（'.container div'）。单击（函数（事件）{
$（this.toggleClass（'active'）；
})
html，正文{
宽度：80%；
保证金：0自动；
}
头{
文本对齐：左对齐；
}
头，img{
宽度：350px；
高度：100px；
浮动：左；
利润底部：1%；
}
.集装箱{
宽度：100%；
身高：100%；
保证金：0自动；
位置：相对位置；
}
钮扣{
背景色：#中交；
颜色：#000000；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
左：15%；
大纲：无；
字号：17px；
利润率最高：2%；
位置：相对位置；
}
按钮h3{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
}
.图标{
高度：2.5em；
宽度：1.7em；
浮动：对；
}
.图标{
背景图片：url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.货柜部现正运作{
身高：100%；
背景色：白色；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
z指数：2；
}
.container div.active按钮{
身高：100%；
}
#第一、第二、第三、第四、最后{
}

随机的
随机的
随机的
随机的
随机的
我认为你想要得到的更多的是相对高度和绝对定位，而不仅仅是
z-index
属性

单击元素
div
后，它必须覆盖父元素。为此，应将容器的
位置：相对
属性和增长元素设置为
位置：绝对
，将
高度
和
宽度
设置为100%，并将
顶部
和
左侧
与父级一致（设置为0）。该按钮位于该div内（
#first、#second、#third、#last
），因此它也必须是
高度：100%

最后，您只需设置
z-index
，以确保当前按钮重叠并覆盖显示的其他按钮


$（'.container div'）。单击（函数（事件）{
$（this.toggleClass（'active'）；
})
html，正文{
宽度：80%；
保证金：0自动；
}
头{
文本对齐：左对齐；
}
头，img{
宽度：350px；
高度：100px；
浮动：左；
利润底部：1%；
}
.集装箱{
宽度：100%；
身高：100%；
保证金：0自动；
位置：相对位置；
}
钮扣{
背景色：#中交；
颜色：#000000；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
左：15%；
大纲：无；
字号：17px；
利润率最高：2%；
位置：相对位置；
}
按钮h3{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
}
.图标{
高度：2.5em；
宽度：1.7em；
浮动：对；
}
.图标{
背景图片：url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.货柜部现正运作{
身高：100%；
背景色：白色；
位置：绝对位置；
T