Question

我确信这不能用CSS完成，因为position: relative内的所有内容都将在其中。所以我想知道可能有一个javascript解决方案。

基本上我想要达到的目的是：http://jsfiddle.net/ZVL8W/3/ 但如果你用相对容器和固定宽度将它包起来，它就不会像这样：http://jsfiddle.net/ZVL8W/8/

它必须在相对容器中，但是这两个元素必须从它中突破并像第一个链接示例一样工作。这有可能用javascript吗？请注意，我无法删除相对父容器。

Answer 1

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    
}

或此http://jsfiddle.net/ZVL8W/10/

.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    
}

从相对父容器中分离出来

1 个答案: