CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Optimus Prime
Optimus Prime

Reputation: 499

Break out from relative parent container

I'm sure this cannot be done with CSS, since all what's inside position: relative will be inside of it. So I was wondering maybe there was a javascript solution.

Basically what I want to achieve is this: http://jsfiddle.net/ZVL8W/3/ But if you wrap it up with relative container and fixed width it won't work like in this: http://jsfiddle.net/ZVL8W/8/

And it must be in relative container, but those two elements must break out from it and work like in first link example. Is this possible somehow maybe with javascript? Note that I cannot remove relative parent container.

Upvotes: 2

Views: 3784

Answers (1)

Amit
Amit

Reputation: 1919

try this http://jsfiddle.net/ZVL8W/9/

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    
}

or this 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    
}

Upvotes: 2

Related Questions