We Keep Coding

Show nested button above overlay

I have an HTML page where I need to make a deeply nested element appear above a neighboring ancestor.
Here is an example JSFiddle: https://jsfiddle.net/nLa607g5/1/
This HTML structure can’t be changed. Using CSS (preferably) or JavaScript, is there any way I can make the red button appear on top of the overlay, but the blue portion appear behind the overlay?
The following are the two main classes that deal with the overlay and button:
.overlay {
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
border-radius: 5px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#cntrl {
float: left;
}
.modal {
overflow: auto;
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
}
.dialog {
background: blue;
width: 100px;
height: 100px;
display: block;
}
.btn {
margin-top: 20px;
position: relative;
background: red;
}
<div class="overlay"></div>
<div id="app">
<div id="cntrl">
<div>
<div>
<div class="modal">
<div class="dialog">
<span>should appear behind overlay</span>
<div class="content">
<div class="footer">
<button class="btn">
Should appear on top of overlay
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Impossible with CSS and no HTML. JavaScript is the only option. Basically, you append the overlay to the footer and the button to the overlay -- exactly what you'd do with HTML.
const overlay = document.querySelector('.overlay');
const footer = document.querySelector('.footer');
const button = document.querySelector('.btn');
footer.append(overlay);
overlay.append(button);
.overlay {
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
border-radius: 5px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#cntrl {
float: left;
}
.modal {
overflow: auto;
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
}
.dialog {
background: blue;
width: 100px;
height: 100px;
display: block;
}
.btn {
margin-top: 20px;
position: relative;
background: red;
}
<div class="overlay"></div>
<div id="app">
<div id="cntrl">
<div>
<div>
<div class="modal">
<div class="dialog">
<span>should appear behind overlay</span>
<div class="content">
<div class="footer">
<button class="btn">
Should appear on top of overlay
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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>

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.

I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle

use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

How to get 3 divs to align horizontally, with height of 100%, inside a container

EDIT: Alignment fixed by adding floats. Height still doesn't fill 100% though. Updated look: https://gyazo.com/4030d76c62c106fae5fbbb07f062efdd
I have a footer container in which I want to have 3 columns (I have made them green, white and red for now so it's easier for you to see). Currently they're stacking vertically but I want them to be beside eachother and have a height of 100% to fill the height of whatever the container's height is. Here is an image of what it looks liek at the moment, please ignore the large black boxes, these are just so I can see where stuff is on the page but will evenutally be transparent etc. https://gyazo.com/12d0642e5fd9518a663606668ec06311
They each have a width of 33% because I want to follow responsive practices and I've currently tried removing all padding and margins etc from every div.
Any help would be greatly appreciated, thank you.
HTML:
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div> <!-- footerContainer -->
</div> <!-- Footer -->
</div> <!-- Page -->
CSS:
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
width: 60%;
max-height: 100%;
margin: 0 auto;
}
#footerLeft {
width: 33%;
height: 100%;
float: left;
background-color: darkolivegreen;
padding: 0;
}
#footerCenter {
width: 33%;
height: 100%;
float: left;
background-color: white;
padding: 0;
}
#footerRight {
width: 33%;
height: 100%;
float: left;
background-color: firebrick;
padding: 0;
}

Add display: flex to the #footerContainer rule, and change max-height: 100%; to height: 100%; in #footerContainer
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
display: flex;
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerLeft {
width: 33%;
background-color: darkolivegreen;
}
#footerCenter {
width: 33%;
background-color: white;
}
#footerRight {
width: 33%;
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div> <!-- footerContainer -->
</div> <!-- Footer -->
</div> <!-- Page -->
Here is a version where I simplified both markup and CSS
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
display: flex;
justify-content: center;
}
#footer > div {
width: 20%;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- Footer -->
</div>
<!-- Page -->
One for older browsers, using display: table
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
display: table;
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerContainer > div {
display: table-cell;
width: 33%;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- footerContainer -->
</div>
<!-- Footer -->
<!-- Footer -->
</div>
<!-- Page -->

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:100%;
height:100%;
}
#div1 {
width:33%;
display:inline-block;
float:left;
height:100%;
}
#div2 {
width:33%;
display:inline-block;
height:100%;
}
#div3 {
width:33%;
display:inline-block;
float:right;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"><!--
--><div id="div2"><!--
--><div id="div3">
</div>
</body>
</html>
If the second div isn't perfectly aligned, try setting #container text-align to center. Is very important to use the comments to delete the space between the divs.

Add float: left to the 3 elements.
Don't repeat the properties, combine the selectors with comma.
To stretch the elements you will need to change max-height to height on #footerContainer.
#content {
background-color: black;
}
.wrapper {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footer {
position: absolute;
width: 100%;
height: 300px;
background-color: black;
}
#footerContainer {
width: 60%;
height: 100%;
margin: 0 auto;
}
#footerLeft,
#footerCenter,
#footerRight {
float: left;
width: 33%;
height: 100%;
padding: 0;
}
#footerLeft {
background-color: darkolivegreen;
}
#footerCenter {
background-color: white;
}
#footerRight {
background-color: firebrick;
}
<div id="Page">
<div id="content" class="wrapper">
</div>
<div id="footer">
<div id="footerContainer">
<div id="footerLeft">
<p>
Test
</p>
</div>
<div id="footerCenter">
<p>
Test
</p>
</div>
<div id="footerRight">
<p>
Test
</p>
</div>
</div>
<!-- footerContainer -->
</div>
<!-- Footer -->
</div>
<!-- Page -->

Need to change position of element on slideToggle

$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second {
position: absolute;
bottom: 0%;
height: 30px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second">
<p>other content</p>
</div>
</div>
Please check this fiddle
https://jsfiddle.net/6d1t5jr8/
I need help to make .second div to .slideToggle from bottom border of .first div.

The problem:
Because of the bottom:0 in that way, the the height of the .second div start from the bottom.
The solution:
Try to wrap the .second with wrapper. So the slide animation will start from the top.
Like this:
jQuery(document).ready(function () {
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second-wrapper {
position: absolute;
bottom: 0%;
height: 30px;
}
.second {
display:none;
background-color: green;
}
.second p {
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second-wrapper">
<div class="second">
<p>other content</p>
</div>
</div>
</div>