We Keep Coding

Cant make a slider

   I cant make a button change images
 This Is my HTML.
.slider {
&__wrapper {
background-color: #eeeeee;
padding: 0 10%;
margin-top: 2.6%;
}
&__image1 {
width: 100%;
}
&__myslides {
background-color: white;
}
&__image2 {
width: 100%;
display: none;
}
&__image3 {
width: 100%;
display: none;
}
&__buttons {
text-align: center;
background-color: black;
opacity: .5;
}
&__buttons button {
height: 35px;
width: 35px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin: 5px;
}
&__buttons button:hover {
opacity: .1;
}
}
<div class="slider">
<div class="container">
<div class="slider__wrapper">
<div class="slider__myslides">
<img src="https://picsum.photos/200/300" alt="robot" class="slider__image1" id="image1" />
</div>
<div class="slider__myslides">
<img src="https://picsum.photos/200/300" alt="space" class="slider__image2" id="image2" />
</div>
<divclass="slider__myslides">
<img src="https://picsum.photos/200/300" alt="space" class="slider__image3" id="image2" />
</div>
<div class="slider__buttons">
<button class="slider__1" id="btn1">1</button>
<button class="slider__2" id="btn2">2</button>
<button class="slider__3" id="btn3">3</button>
</div>
</div>
</div>
</div>
I tried to add class active to transform display none image into Flex. It works.
i can also turn flex into none.
But i can only do it seperatly. I cant make both things happen with just One Burton.

adding events to elements via for loop is causing all elements to only effect the last element in the loop

Edit: I have found an alternate solution to this.
I can't answer my question yet because it is too new, and my rep is too low. But,
Here is what I did:
addIdToElements();
$(window).click(function(e){
console.log('clicked'+ e.target.parentNode.id.replace("slider-arrow-right","")
})
.content {
position: relative;
}
.arrow-container {
position: relative;
top: -38px;
width: 110%;
}
.slider-arrow {
position: absolute;
}
.slider-arrow-right {
right: 0px;
}
.outer {
display: flex;
overflow-x: auto;
height: 100%;
}
.inner {
flex: 0 0 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content" style="width: 400px; height:25px; margin-bottom: 10px;">
<div class="outer" style="margin: 0 20px; overflow-x: auto; width:100%; height: 100%">
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: blue;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: orange;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: green;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: purple;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: yellow;">
</div>
</div>
<div class="arrow-container">
<div class="slider-arrow slider-arrow-left">
<p class="stretch"><</p>
</div>
<div class="slider-arrow slider-arrow-right">
<p class="stretch">></p>
</div>
</div>
</div>
<div class="content" style="width: 400px; height:25px; margin-bottom: 10px;">
<div class="outer" style="margin: 0 20px; overflow-x: auto; width:100%; height: 100%">
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: blue;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: orange;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: green;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: purple;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: yellow;">
</div>
</div>
<div class="arrow-container">
<div class="slider-arrow slider-arrow-left">
<p class="stretch"><</p>
</div>
<div class="slider-arrow slider-arrow-right">
<p class="stretch">></p>
</div>
</div>
</div>
I am trying to make clickable arrows on my divs that will scroll the div horizontally by the clientWidth. When I click the first divs arrow however, it affects the second div. As you can see in the code below, clicked2 is displayed to console instead of click1 when I click the right arrow of the first div. Could someone please help point me in the right direction?
edit: removed irrelevant code.
function addIdToElements() {
var outerElements = document.getElementsByClassName("outer");
var rightArrowElements = document.getElementsByClassName("slider-arrow-right");
var leftArrowElements = document.getElementsByClassName("slider-arrow-left");
for (var i = 0; i < outerElements.length; i++) {
outerElements[i].id = "outer-" + i.toString();
rightArrowElements[i].id = "slider-arrow-right-" + i.toString();
leftArrowElements[i].id = "slider-arrow-left-" + i.toString();
}
}
addIdToElements();
var outerClassElements = document.getElementsByClassName('outer');
for (var i = 0; i < outerClassElements.length; i++) {
var currentOutterSection = document.getElementById('outer-' + i.toString());
var currentRightArrow = document.getElementById('slider-arrow-right-' + i.toString());
var currentLeftArrow = document.getElementById('slider-arrow-left-' + i.toString());
currentRightArrow.addEventListener('click', function() {
console.log('clicked' + i);
})
}
.content {
position: relative;
}
.arrow-container {
position: relative;
top: -38px;
width: 110%;
}
.slider-arrow {
position: absolute;
}
.slider-arrow-right {
right: 0px;
}
.outer {
display: flex;
overflow-x: auto;
height: 100%;
}
.inner {
flex: 0 0 25%;
}
<div class="content" style="width: 400px; height:25px; margin-bottom: 10px;">
<div class="outer" style="margin: 0 20px; overflow-x: auto; width:100%; height: 100%">
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: blue;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: orange;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: green;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: purple;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: yellow;">
</div>
</div>
<div class="arrow-container">
<div class="slider-arrow slider-arrow-left">
<p class="stretch"><</p>
</div>
<div class="slider-arrow slider-arrow-right">
<p class="stretch">></p>
</div>
</div>
</div>
<div class="content" style="width: 400px; height:25px; margin-bottom: 10px;">
<div class="outer" style="margin: 0 20px; overflow-x: auto; width:100%; height: 100%">
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: blue;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: orange;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: green;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: purple;">
</div>
<div class="inner" style="float: left; margin: 0px; width:25%; height: 100%; background-color: yellow;">
</div>
</div>
<div class="arrow-container">
<div class="slider-arrow slider-arrow-left">
<p class="stretch"><</p>
</div>
<div class="slider-arrow slider-arrow-right">
<p class="stretch">></p>
</div>
</div>
</div>

When using a variable inside a "for" loop and an event inside that loop, you will ever point onto the last value of this variable when the event fires. Instead, set up an external function to which you pass your current variables values as arguments (they will have a new scope) and create your event from there.
For exemple:
for (var i = 0; i < elements; i++) {
setAction(elements[i], i, elements);
}
function setAction(element, i, elements) {
// console.log(element, i, elements);
// element.addEventListener...
}
Or use the equivalent "forEach" loop that avoids this kind of issue:
elements.forEach(function(element, i, elements) {
// console.log(element, i, elements);
// element.addEventListener...
});
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach

Make div overlap horizontally the other 4 divs and stretch across the page(height 100%?)

So i have 4 different divs with buttons in them and I'm trying to set up so whenever one of those buttons are being clicked, it will overlap the other divs on the page.
I know it has something to do with z-index and positioning of the divs but I guess it needs to be added to the Jquery rather than the CSS?
I have checked out a previous code, where the divs overlap eachother vertically. Here's that code:
$('#divleft, #divmid, #divright').toggle(function () {
var cfg = {height:'200', width:'100%'};
$(this).css({'z-index':100});
var pct = $(this).css('left').split('p')[0]/$(document).width();
if(pct <= .33 && pct > 0){
cfg.left = '0';
$(this).data('oldLeft', "33%");
} else if(pct <= .66 && pct > .33) {
cfg.left = '0';
$(this).data('oldLeft', "66%");
}
$(this).animate(cfg)
}, function () {
var cfg= {height:'200', width:'33%', 'z-index':1};
if ($(this).data('oldLeft')) {
console.log($(this).data('oldLeft'));
cfg.left = $(this).data('oldLeft');
}
$(this).animate(cfg)
})
#divleft {
width:33.3%;
height:200px;
background:#ccc;
z-index: 1;
margin-top: 10px;
position: absolute;
left:0;
}
#divmid {
width:33.3%;
height: 200px;
background: #696;
margin-top: 10px;
z-index: 1;
position:absolute;
left:33%;
}
#divright {
width:33.3%;
height:200px;
background:#000;
margin-top: 10px;
z-index: 1;
position:absolute;
left:66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divleft"><p>Click Me!</p></div>
<div id="divmid"></div>
<div id="divright"></div>
What this code does is that it overlaps the divs using width 100%, vertically. I was just wondering how you would go about if you were to overlap the divs horizontally.
My code so far is this:
html, body {
width: 80%;
margin: 0 auto;
}
head {
text-align:left;
}
head, img {
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container {
width: 100%;
height: 100%;
margin: 0 auto;
}
button {
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
transition: 0.4s;
margin-top: 2%;
}
.icon {
width: 25px;
height: 25px;
padding-right: 15%;
float: right;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
<div class="container">
<div id="first">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="second">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="third">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="fourth">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="last">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
</div>
Thanks!

I think what you are trying to get it has more to do with relative height and absolute positioning than with the z-index property only.
Once the element div is clicked it has to cover the parent element. To do that you should put the container the position: relative property and the growing element as position: absolute and the height and width to 100% and positioning top and leftcoinciding with the parent (to 0). The button is inside that div (#first, #second, #third, #last) so it has to be also height: 100%
And finally you just set the z-index to ensure that the current button overlaps and cover the other buttons displayed.
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>

great solution and thanks for quick response! Just wondering where I would place my jquery code?
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>

[EDIT]: You include jquery just before closing the body tag of your html document, and you write your javascript just bellow that. Like the following:
<body>
<!-- Here goes your page content -->
<!-- Here you include the jquery and any js you may need -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Here goes custom jquery code -->
<script>
$('.btn').click( function(){
$(this).parent().addClass("active")
})
</script>
</body>
I suggest you check the Stackoverflow rules:
https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work?rq=1
Here is the simplified solution to your problem:
$('.btn').click( function(){
$(this).parent().addClass("active")
})
.elements-container {
position: relative;
}
.element {
float: left;
width: 25%;
background-color: grey;
text-align: center;
padding: 50px 0;
}
.element.active {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements-container">
<div class="element">
<button class="btn">Button 1</button>
</div>
<div class="element">
<button class="btn">Button 2</button>
</div>
<div class="element">
<button class="btn">Button 3</button>
</div>
<div class="element">
<button class="btn">Button 4</button>
</div>
</div>

jQuery image slider scrolls page to top when changing image

I've just started to get into jQuery, so I apologise for the bad coding in advance. I just recognised that whenever I scroll a bit down so that just a bit of the jQuery image slider is visible on the top of the page, it scrolls me automatically back to top when the jQuery image slider changes the picture. But when I am as far down on the page that the slider isn't visible at all or when I barely scroll down so that the most part of the slider is still on the screen, it doesn't scroll me back to top.
I would appreciate any help since I am not able to find the issue.
Thanks in advance.
$('#back_to_top').click(function()
{
$('html, body').animate({scrollTop: 0});
return false;
});
// Nav bar drop down code
$('#deals_a').hover(function(){
$('#deals_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#deals_dropdown').is(':hover')){
$('#deals').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#deals_dropdown').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
};
$('#services_a').hover(function(){
$('#services_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#services_dropdown').is(':hover')){
$('#services').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#services_dropdown').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
};
// Slider button code
$('.slider_button').hover(function(){
$('.slider_button').removeClass('active_button');
$(this).addClass('active_button');
$('.slide').hide();
$($('#slider').children()[$(this).index()]).show();
});
// Slider code
$(document).ready(function(){
// Set options
var speed = 500; // Fade speed
var autoswitch_speed = 4000; // Auto slider speed
var myInterval = setInterval(nextSlide, autoswitch_speed);
// Add initial active class
$('.slide').first().addClass('active');
// Hide all slides
$('.slide').hide();
// Show first slide
$('.active').show();
// show the first node
($($('#slider_button_container').children()[0])).addClass('active_button');
var counter = 1;
// Switch to next slide
function nextSlide(){
clearInterval(myInterval);
$('.slider_button').removeClass('active_button');
($($('#slider_button_container').children()[counter - 1])).removeClass('active_button');
($($('#slider_button_container').children()[counter])).addClass('active_button');
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
($($('#slider_button_container').children()[3])).removeClass('active_button');
($($('#slider_button_container').children()[0])).addClass('active_button');
counter = 0;
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
counter = (counter + 1) % 4;
myInterval = setInterval(nextSlide, autoswitch_speed);
}
});
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height: 600px;
text-align: center;
}
#nav_menu{
height: 98px;
display: inline-block;
border-bottom: 2px solid #FFF;
padding: 0 20px 0 20px;
position: relative;
z-index: 2;
}
.nav_menu_items{
float: left;
margin: 10px;
padding-bottom: 10px;
width:auto;
line-height: 80px;
}
.nav_menu_items a{
text-decoration: none;
color: #FFF;
font-size: 20px;
font-weight: bold;
position: relative;
font-family: 'Exo 2', sans-serif;
font-style: italic;
}
.nav_menu_sup:hover::after{
content: "\25B2";
position: absolute;
left: 40%;
top: 14px;
}
#back_to_top, #back_to_top img{
position: fixed;
width: 50px;
height: 50px;
right: 50px;
bottom: 50px;
display:block;
}
.dropdown{
display:none;
height: auto;
width: auto;
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
position: absolute;
background: #FFF;
top:100px;
line-height: 20px;
list-style-type: none;
}
.color_1{
background: #4BB7BE;
}
.color_2{
background: #2A7287;
}
.dropdown li{
padding: 10px;
;
}
.dropdown li:hover{
}
.dropdown li a{
color: #FFF;
}
.dropdown li a:hover{
color: #FFA;
}
#slider{
position: relative;
width: 100%;
height: 100%;
margin-top: -105px;
z-index: 1;
overflow: hidden;
}
.slide img{
height: 600px;
}
.darkening_layer{
width: 100%;
height: 600px;
position: absolute;
background: rgba(0, 0, 0, 0.2);
}
#slider_button_container{
position: relative;
display: inline-block;
top: -50px;
z-index: 2;
}
.slider_button{
height: 18px;
width: 18px;
border-radius: 50%;
border: 3px solid #FFF;
float: left;
z-index: 100;
margin-left: 10px;
cursor: pointer;
position: relative;
display: block;
}
.slider_button:hover{
background: #FFF;
}
.active_button{
background: #FFF;
}
#first_slider_button{
}
#welcome{
background: #007DCC;
width: 100%;
height: 400px;
}
#advertise{
background: #004E7F;
width: 100%;
height: 400px;
}
footer{
width: 100%;
height: 400px;
background-color: #007DCC;
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sea Kozmetik ve Güzellik</title>
<link rel="stylesheet" style="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="nav_menu">
<div id="home" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ANASAYFA</a>
</div>
<div id="about" class="nav_menu_items">
<a class="nav_menu_sup" href="#">HAKKIMIZDA</a>
</div>
<div id="deals" class="nav_menu_items">
<a class="nav_menu_sup" id="deals_a" href="#">KAMPANYALAR</a>
<ul id="deals_dropdown" class="dropdown">
<li class="color_1">Öğrenci Kampanyaları</li>
<li class="color_2">Epilasyon Kampanyaları</li>
<li class="color_1">Cilt Bakımı Kampanyaları</li>
</ul>
</div>
<div id="services" class="nav_menu_items">
<a class="nav_menu_sup" id="services_a" href="#">HİZMETLERİMİZ</a>
<ul id="services_dropdown" class="dropdown">
<li class="color_1">Cilt Bakımı</li>
<li class="color_2">Depilasyon</li>
<li class="color_1">Epilasyon</li>
<li class="color_2">Manikür</li>
<li class="color_1">Pedikür</li>
<li class="color_2">Tırnak Bakımı</li>
<li class="color_1">Kaş Tasarımı</li>
<li class="color_2">Makyaj</li>
</ul>
</div>
<div id="products" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ÜRÜNLERİMİZ</a>
</div>
<div id="gallery" class="nav_menu_items">
<a class="nav_menu_sup" href="#">GALERİ</a>
</div>
<div id="contact" class="nav_menu_items">
<a class="nav_menu_sup" href="#">İLETİŞİM</a>
</div>
</div>
<!-- Picture size must be 1519px x 600px -->
<div id="slider">
<div id="first_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_7.jpg" alt="">
</div>
<div id="second_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_8.jpg" alt="">
</div>
<div id="third_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_9.jpg" alt="">
</div>
<div id="fourth_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_10.jpg" alt="">
</div>
</div>
<div id="slider_button_container">
<div id="first_slider_button" class="slider_button"></div>
<div id="second_slider_button" class="slider_button"></div>
<div id="third_slider_button" class="slider_button"></div>
<div id="fourth_slider_button" class="slider_button"></div>
<div class="clear"></div>
</div>
</header>
<div id="back_to_top">
<img src="images/arrow_up.png" alt="back to top">
</div>
<section id="welcome">
</section>
<section id="advertise">
</section>
<footer>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>

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:
A CSS solution is preferred.

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>

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

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