Develop Reference

Layer is not being display even though it was assigned high z-index

I am facing an issue with a div not being displayed when it is toggled from display: none; to display: block;
HTML:
<div class="menus-container" style="display: block; top: 50px; height: 277px;">
.. some pretent content, which shows up in another place on the website ...
</div>
Which is toggled by js by a plugin JS which is minified so I cannot list the js, but I see in the developer toolbar that the style changes work.
I see that it has a height, I see that it has a width and a z-index of about 99999.To be sure I assigned in the developer tool bars all parent elements as well an z-index: 999 !important;
Still that div wont show up... any ideas? If you want to look at the example follow this link (redacted) - it only happens at a width of less than 850px.

The problem here isn't a z-index issue, it's that the menu is appearing outside of its parent, the header element, which has overflow set to hidden. Setting the overflow to visible reveals the menu. You'll want to do some other things too, like give the menu a solid background color so it's easier to read.
<header class="main-header collapsed-gallery-page-menu" style="overflow: visible;">

Animating the "body" tag in jQuery does nothing

So one of the buttons on my site's nav bar brings down a small grey tab from the top which tells you about the site. Here is the code I'm using for the animations:
var aboutMenu = function(){
$(".aboutButton").click(function(){
$("body").animate({top: "42px"}, 200);
$(".about").animate({top: "0px"}, 200);
});
}
$(document).ready(aboutMenu);
The idea is that the body of my website, along with all its content, moves down 42 pixels. This is whilst the content in the "about" class moves down so that it's visible on the screen. If you do click on the "About" button, all that happens is the grey tab moves down, but the body stays where it is. This would not usually be a problem, except the tab obscures the rest of the nav bar.
Here is some more relevant code (if needed):
HTML:
<div class = "about">
<p align = "center">placeholder text</p>
</div>
and the actual link:
<li> <a class = "aboutButton">About this website</a></li>
CSS:
.about{
background-color: gray;
top: -42px;
height: 42px;
position: fixed;
}
.about p{
color: white;
}
.aboutButton{
cursor: pointer;
}

As mentioned in my comment, to be able to animate top (or other positions for that matter), you need to set a position: ... (e.g. position: relative;.

You could try using a different way to call your function, e.g. add this attribute to your link: `onClick(aboutMenu())
Also try putting an allcontent div around everything and animating that, body tags aren't that good for animations

Why does jQuery show() cause a brief but noticeable jerk when unhiding a div?

I'm trying to show a hidden div on a form the first time that a user clicks the submit button. Whilst I have this working using jQuery, if I set any value other than 0 for the show() transition period, the div that is being show "jerks" to the side.
This is using Bootstrap and tested on Safari.
I think the problem may be around margin: 0 auto on the form (it's as if the margins align after jQuery has shown the element).
Here's the JSFiddle that demonstrates the issue.

This is because of jQuery's animation wrappers. jQuery puts an element that is about to be animated in another div helper for the animation.
This wrapper messes up margins on the element being animated (almost) every time.
I changed this rule:
#signup-form .form-group {
margin: 10px 0 10px 0;
}
To this:
#signup-form .form-group {
margin: 0 0 10px 0;
}
removing the top margin.
The jQuery animation adds a wrapper around the element which kills the top margin while the animation is underway. As soon as the animation is over jQuery unwraps the element, and the margin is applied, creating the jump.
Here is an updated JSFiddle demo.

you execute css twice, for that reason the "jerk" occurs
change to the following:
#signup-form {
margin: 10px auto;
}
#signup-form-submit {
width: 200px;
margin: 10px auto;
}
here is the fiddle:http://jsfiddle.net/cqq8x/4/

I got is working by removing this line in the css
#signup-form .form-group {
margin: 10px 0;
}
at least that is a start

It's actually because of the addition of the scrollbar when the new div makes the page too long. This adjusts the width of the page, which does change the alignment as you noted.
Sorry, this only happens on smaller screens. I'm updating with an answer for bigger screens.
Update: It appears the order of functions also impacts things. I moved
$('#signup-form-submit').removeClass('show-hidden-div');
above the show function and it is much cleaner.

Jerking happens when the parent div ".collapse" has padding.
Padding goes on the child div, not the parent. jQuery is animating the height, not the padding.
Example:
<div id="collapseForm" class="container collapse in">
<div class="row">
<div class="col-xs-12 pd">
Padding goes on the child div. Not the parent.
</div>
</div>
</div>
Hope this helps.

sliding up/down form in bootstrap

I am creating a from with sliding up/down animation in a bootstrap template.
Here is the code : http://bootply.com/94382
When You click on the add button, the form will slide down and when You will click it again, it will slide up.
But if i am adding new elements on the page after the buttons, the new elements are not moving down instead the form is coming over the elements.
i want to achieve that the new elements will slide down and then form will come. But this is not happening now. Please help me out.

First of all remove position:absolute, position:fixed from your css where it actually not required. Also, use spans or ul li list with proper styles to render the icons, buttons, images in <div id="bottom-header">. Then remove position:absolute from your form and give proper margins width etc. so that you will get what you expected.

Replace your #sliding_form CSS properties to :
#sliding-form {
display: none;
background-color: #eee;
width: 45%;
margin-top: 60px;
overflow: hidden;
}
Updated Bootply

Send to back functionality in HTML5

I'm having the following use case that I want to achieve in HTML
I've two div element with background red and blue. The blue div is added later of which a part overlaped with red div.
I have the option of "send to back" which sends the selected div to back of other div.
If I apply this to blue div and select blue div it should look like below image
Basically I'm trying to minic the functionality of Arrange --> Order --> Send to back of Google Presentation
I did try z-index with no success. I can use background-gradient with the overlaped part of blue div transparent but that will invole some calculations which I want to avoid.
How to acheive this in HTML?
Any help is appreciated.
Note: All div elements are placed with position: absolute
Update: The red div lies above the blue div as its z-index is higher than blue div. When red div is selected it should look like below (with border highlighted).
Now if I select the blue div a part of it that overlapes with red div does not appear (obviously since its z-index is lesser) but I want its border to appear when I select.it.

As you've commented, I guess what you need is this, also, just call a class on a div which you want to stack up.
Final Demo
I am not getting your question quiet well, but I assume you want to bring an element above another when it is clicked, than you can do it this way
Demo
Explanation:
What am doing here is, am simply applying z-index on the div you click using jQuery.
Demo 3 (As you updated your question)
Using border to mark the current selected div
$(".wrap div").click(function(){
$('.wrap div').removeAttr('style');
$(this).css({"z-index":"1", "border":"1px solid #000"});
});
Demo 2
Code Reference :
$(".wrap div").click(function(){
$(this).css("z-index","1");
});
.wrap {
position: relative;
}
.wrap div {
position: absolute;
height: 100px;
width: 100px;
}
.wrap div:nth-of-type(1) {
background: #f00;
left: 10px;
}
.wrap div:nth-of-type(2) {
background: #0f0;
left: 80px;
}
<div class="wrap">
<div></div>
<div></div>
</div>