Javascript 从相对父容器中断

我确信CSS不能做到这一点，因为

position:relative
中的所有内容都在它里面。所以我想知道也许有一个javascript解决方案

基本上，我想要实现的是：
但如果使用相对容器和固定宽度将其包裹起来，则不会像这样工作：

它必须在相对容器中，但这两个元素必须从中分离出来，并像第一个链接示例中那样工作。这是否可能通过javascript实现？请注意，我无法删除相对父容器。
请尝试此操作

还是这个

这只能通过css来实现。相应地定义容器的宽度、高度和位置。宽度在第二个示例中定义，div内的元素必须与第一个链接中的位置完全相同，并且忽略父容器的固定宽度并超出其边界。是的，它可以超出容器。
HTML,BODY { 
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
}

.container {
    position: relative;
    width: 100%;
    height:100%;
}

.left-box {
    width: 100px;
    height: 100px;
    background-color: red;
    display: block;
    position:ABSOLUTE;
    top:50%;
    left:0px;
    margin-top:-50px
}
.right-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: block;
    position:absolute;
    top:50%;
    right:0px;
    margin-top:-50px    
}

.container {
    position: relative;
    width: 200px;
}

.left-box {
    width: 100px;
    height: 100px;
    background-color: red;
    display: block;
    position:fixed;
    top:50%;
    left:0px;
    margin-top:-50px
}
.right-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: block;
    position:fixed;
    top:50%;
    right:0px;
    margin-top:-50px    
}