Machen div überlappen horizontal die anderen 4 divs und dehnen über die Seite (Höhe 100%?)

Question

So habe ich 4 verschiedene divs mit Tasten in ihnen und ich versuche einzurichten, wenn eine dieser Tasten geklickt wird, Es überlappt die anderen divs auf der Seite.

Ich weiß, dass es etwas mit Z-Index und Positionierung der divs zu tun hat, aber ich denke, es muss zu den Jquery und nicht zum CSS hinzugefügt werden?

Ich habe einen früheren Code ausgecheckt, wo sich die divs vertikal überlappen. Hier ist der 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>

Was dieser Code tut, ist, dass es die divs mit Breite 100% überlappt, vertikal. Ich habe mich nur gefragt, wie Sie vorgehen würden, wenn Sie die Divs horizontal überlappen würden.

bisher Mein Code ist dies:

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> \t 
 

 
    <div id="third"> 
 
    <button><h3>Random <img class ="icon" src="infoicon.png"></h3></button> 
 
    </div> \t 
 

 
    <div id="fourth"> 
 
    <button><h3>Random <img class ="icon" src="infoicon.png"></h3></button> 
 
    </div> \t 
 

 
    <div id="last"> 
 
    <button><h3>Random <img class ="icon" src="infoicon.png"></h3></button> 
 
    </div> 
 

 
</div>

Dank!

Answer 1

Ich denke, was Sie versuchen zu bekommen, hat es mehr mit relativer Höhe und absoluter Positionierung als nur mit der z-index Eigenschaft zu tun.

Sobald das Element div angeklickt wurde, muss es das übergeordnete Element abdecken. Um dies zu tun, sollten Sie den Container die position: relative Eigenschaft und das wachsende Element wie position: absolute und die height und width auf 100% und Positionierung top und left mit dem übergeordneten (auf 0) übereinstimmen. Die Taste ist innerhalb dieses div (#first, #second, #third, #last), so hat es auch height: 100%

sein Und schließlich setzen Sie nur die z-index, um sicherzustellen, dass die aktuelle Taste Überlappungen und angezeigt, die anderen Tasten decken.

$('.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>

Answer 2

[BEARBEITEN]: Sie schließen jquery kurz vor dem Schließen des Body-Tags Ihres HTML-Dokuments ein, und Sie schreiben Ihr Javascript einfach darunter. Wie folgt aus:

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

Ich schlage vor, Sie die Stackoverflow Regeln überprüfen: https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work?rq=1

Hier ist die vereinfachte Lösung für Ihr 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>

Answer 3

große Lösung und Dank für die schnelle Antwort! Ich frage mich, wo ich meinen jQuery-Code platzieren würde?

$('.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>