Q:
How to make a div appear over another?
I have a div with a click event to call another function. What I would like to do is to make a div with a higher z-index to show over the other div. Any ideas on how to make it?
I would like to make a div that can be hidden when the link is clicked and then made to show when a page is reloaded.
The problem is that the div which is hidden only disappears from the page and I cannot figure out how to make it so that it stays visible when reloading the page.
.footer-link{
background-color: transparent;
border-radius: 0;
color: white;
display: block;
float: right;
font-size: 15px;
height: 48px;
margin-top: -1.5%;
text-align: right;
vertical-align: top;
width: 35%;
}
#footer_links {
clear: both;
height: 6.0em;
text-align: center;
}
#footer_links a {
background-color: #333;
border-radius: 0px;
color: #fff;
display: inline-block;
height: 100%;
padding: 1.0em;
text-decoration: none;
transition-duration: 0.5s;
}
#footer_links a:hover {
background-color: #fff;
color: #333;
}
A:
You can try this:
.footer-link{
background-color: transparent;
border-radius: 0;
color: white;
display: block;
float: right;
font-size: 15px;
height: 48px;
margin-top: -1.5%;
text-align: right;
vertical-align: top;
width: 35%;
}
.inactive_div {
display: none;
}
.active_div {
display: block !important;
}
In jQuery you can write a similar code:
$(function() {
$('.active_div a').click(function(e) {
e.preventDefault();
$(this).parent().addClass('inactive_div');
$(this).parent().removeClass('active_div');
});
});
$('.inactive_div').click(function(e) {
e.preventDefault();
$(this).parent().addClass('active_div');
$(this).parent().removeClass('inactive_div');
});
Note that you can use the same style elements above into your document.
Edit: Based on your comment, I'll recommend you another approach that uses CSS.
Note that in your example, you are using absolute positioning, so I'll keep it like that.
However, it's better to use the float CSS property.
Let's see your code:
.footer-link{
background-color: transparent;
border-radius: 0;
color: white;
display: block;
float: right;
font-size: 15px;
height: 48px;
margin-top: -1.5%;
text-align: right;
vertical-align: top;
width: 35%;
}
.inactive_div {
display: none;
}
.active_div {
display: block !important;
}
So let's change it to this:
.footer-link{
background-color: transparent;
border-radius: 0;
color: white;
float: right;
font-size: 15px;
height: 48px;
margin-top: -1.5%;
text-align: right;
vertical-align: top;
width: 35%;
}
.inactive_div {
display: none;
}
.active_div {
display: block !important;
}
And this is the HTML part:
And this is the jQuery part:
$(function() {
$('.active_div a').click(function(e) {
e.preventDefault();
$(this).parent().addClass('inactive_div');
$(this).parent().removeClass('active_div');
});
});
$('.inactive_div').click(function(e) {
e.preventDefault();
$(this).parent().addClass('active_div');
$(this).parent().removeClass('inactive_div');
});
And a working version in jsfiddle: https://jsfiddle.net/b5x6hrs1/
If you want to remove the position, you can do this by CSS:
.footer-link {
position: absolute;
top: 100px;
}
I'll edit the jsfiddle, if you want.
