CODEWITHSUNDEEP
javascriptjqueryhtmlcssz-index
harsh.gupta
harsh.gupta

Reputation: 45

Tricky div overlapping

I am trying to use z-index to overlap in this scenario, but I cannot achieve the results I am looking for.

Here is my code: https://jsfiddle.net/mx0zdpvm/.

body{
    margin: 0;
    background-color: #ffffff;
}
#designWrapper{
    width: 60vw;
    height: 100%;
    float: right;
}
#redStripes{
    position: static;
}
#triangle{
    position: static;
    border-bottom: 25vw solid #ceecec;
    border-left: 17.5vw solid #ffffff;
}
.redStripe{
    margin-bottom: 10px;
    background-color: #e83c3c;
    transform: rotate(25deg);
    width: 200vw;
    height: 35px;
    position: relative;
    left: -100px;
}
<div id="designWrapper">
    <div id="design">
        <div id="redStripes">
            <div class="redStripeWrapper" id="redStripeWrapper1">
                <div class="redStripe" id="red1">
                    red1
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper2">
                <div class="redStripe" id="red2">
                    red2
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper3">
                <div class="redStripe" id="red3">
                    red3
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper4">
                <div class="redStripe" id="red4">
                    red4
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper5">
                <div class="redStripe" id="red5">
                    red5
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper6">
                <div class="redStripe" id="red6">
                    red6
                </div>
            </div>
        </div>
        <div id="triangleWrapper">
            <div id="triangle">
            </div>
        </div>
    </div>
</div>

This is the result I am trying to achieve:desired results

A CSS solution is preferred.

Upvotes: 1

Views: 207

Answers (3)

DanielaB67
DanielaB67

Reputation: 442

First change:

#redStripes{
    position: relative;
    top:60px;
    right:280px;
    z-index: 2;
}

If you want to overlap elements, divs, you need to specify position absolute or relative to something, otherwise the z-index will not work.

https://jsfiddle.net/scorpio777/mx0zdpvm/3/

body{
    margin: 0;
    background-color: #ffffff;
}
#designWrapper{
    width: 60vw;
    height: 100%;
    float: right;
}
#redStripes{
    position: relative;
    top:50px;
    right:280px;
    z-index: 2;
}
#triangle{
    position: static;
    border-bottom: 25vw solid #ceecec;
    border-left: 17.5vw solid #ffffff;
}
.redStripe{
    margin-bottom: 10px;
    background-color: #e83c3c;
    transform: rotate(25deg);
    width: 200vw;
    height: 35px;
    position: relative;
    left: -150px;
}
<div id="designWrapper">
    <div id="design">
        <div id="redStripes">
            <div class="redStripeWrapper" id="redStripeWrapper1">
                <div class="redStripe" id="red1">
                    red1
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper2">
                <div class="redStripe" id="red2">
                    red2
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper3">
                <div class="redStripe" id="red3">
                    red3
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper4">
                <div class="redStripe" id="red4">
                    red4
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper5">
                <div class="redStripe" id="red5">
                    red5
                </div>
            </div>
            <div class="redStripeWrapper" id="redStripeWrapper6">
                <div class="redStripe" id="red6">
                    red6
                </div>
            </div>
        </div>
        <div id="triangleWrapper">
            <div id="triangle">
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Chris Marsland
Chris Marsland

Reputation: 164

This will sort the overlapping out. I set the position to relative and a z-index of 1 to the blue triangle, and 2 to the red strips, then adjusted the positioning with top and right. I will leave you to sort out the rest :)

body{
    margin: 0;
    background-color: #ffffff;
}
#designWrapper{
    width: 60vw;
    height: 100%;
    float: right;
}
#redStripes{
    position: static;
}
#triangle{
    position: relative;
    border-bottom: 25vw solid #ceecec;
    border-left: 17.5vw solid #ffffff;
    right: 0px;
    top:-100px;
    z-index:1;
}
.redStripe{
    margin-bottom: 10px;
    background-color: #e83c3c;
    transform: rotate(25deg);
    width: 200vw;
    height: 35px;
    position: relative;
    z-index:2;
    left: -100px;
}

Upvotes: 0

Abslen Char
Abslen Char

Reputation: 3135

You cannot overlap elements if you don't set the position to absolute or relative.

Upvotes: 0

Related Questions