Normally a div gets displayed after the previous one (like to the right of it, to the down of it or wherever depending on the context and the styles set to them). I need a div to get displayed over (in terms of Z-order) the previous like if it was not there. What styles should I set to the background and the foreground divs to make them to behave so?
You need to use absolute positioning on the div elements.
Given the following HTML
<div class="container">
<div class="first-div"></div>
<div class="second-div"></div>
</div>
You'd use the following CSS
.container {
position: relative;
}
.first-div,
.second-div {
position: absolute;
top: 0;
left: 0;
}
Here's a demo with color. I've offset the second-div by 5 pixels in both directions in order to show that they are layered.
You can use the following HTML structure:
<div class="outer">
<!-- Content of outer div here -->
<div class="inner">
<!-- Content of inner div here -->
</div>
</div>
And apply this CSS:
.outer {
position: relative;
}
.inner {
position: absolute;
/**
* change this and other CSS properties like left, right
* to position the inner div relative to the outer div
*/
top: 0px;
}
Just a position:absolute; added to the css of required elements will do.
Related
say I have the following:
<div id="fader"></div>
<div id="wrapper">
<div class="content">Blah Blah</div>
<div class="content">Blah Blah</div>
<div class="content">
<div id="form">form goes here</div>
</div>
<div id="form2">Form goes here</div>
Now #form is actually invisible until a button is clicked. At that point, I want fader to black out the entire page, and the #form shows up.
I have this working by using position: absolute and the correct z-index. Now, #wrapper is set to a z-index lower than #fader's z-index. I want #form z-index to be higher than #fader, but still be inside #wrapper! Is there anyway to do this?
Thanks
Z-index only applies to positioned elements.
http://jsfiddle.net/sSKZS/1/
#wrapper {z-index: 1; position: relative;}
#fader {z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#form2 {z-index: 3; position: absolute;}
No, because #form is set within the context of #wrapper.
If you think of #fader, #wrapper, and #form2 as busses speeding down the highway, they can all pass one another, merge lanes, etc. The passengers in the #wrapper vehicle — the .content divs and #form — move with #wrapper and can move about inside the “bus”, but they’re confined within it. (Depending on your CSS, #form may be nested in another context of .content, but that's a little out of scope.)
You’d have to move #form out of #wrapper into the body, either dynamically with a JavaScript event or on page load. But either way, it can’t be on the bus.
I have a page setup like
<div id="container">
<div id="main>
<div id="sidebar"></div>
<div id="content"></div>
</div><!-- end main -->
<div id="footer"></div>
</div>
with css:
#container {
position: relative;
}
#footer {
position: absolute;
bottom: 0px
}
#content {
position: absolute;
}
This works for my default layout, but when I resize to something for mobile (i.e. less that 767 px)...my content becomes so long it runs behind my footer (and "outside" of my container div).
I need to keep the content position: absolute for my mobile layout (so that it runs vertically along with my sidebar, which is partially above the content and partially below the content in the mobile layout). But it seems like the absolute positioning is knocking the content div out of the regular flow so that the footer doesn't end up BELOW my content.
You should not be using absolute positioning unless really required. What you can do in your current setup, is supply height for the contents and make it auto scrollable.
#content {
position: absolute;
height:400px;
overflow:scroll;
}
Let's say I have a DIV that's styled as a square, and it has squares (DIV) inside of it. I'd like the squares inside the main DIV to stack in the lower right. I can use float: right to to get them on the right edge, but how do I make them stack at the bottom rather than the top?
Should you not find a good CSS solution, jQuery can easily handle this:
Fiddle
$('.inner').each(function(i) {
$this = $(this);
var bottomPos = ($this.outerHeight())*i;
$this.css('bottom', bottomPos);
});
HTML and CSS
<style type="text/css">
#outer {
width: 400px;
height: 600px;
background-color: #eee;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #aaa;
position: absolute;
right: 0;
}
</style>
<div id="outer">
<div class="inner">One</div>
<div class="inner">Two</div>
<div class="inner">Three</div>
<div class="inner">Four</div>
</div>
To get a child to stick to the very bottom of a container, set the position:relative and bottom:0px. However this will not stack them, you'd have to set the bottom to another value for a child to be above another child. You could use javascript or jquery to dynamically fit them if the sizes are variable like this:
$('#second_element').css('bottom', $('#bottom_element').height() + 5);
Note: 5 is just for padding
You can use display:table-cell with vertical-align:bottom
Here's a good tutorial on using "table-cell" layout:
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
Depending on what you mean by "stack at the bottom", you can achieve this with the use of an inner container div that is aligned at the bottom. Then these child squares can be float right inside of this container div, causing them to stick to the bottom of the main div, like so:
<div id="main_div" style="position: relative; height: 500px; width: 500px;">
<div id="container_div" style="position: absolute; bottom: 0; right: 0;">
<div class="right_floated_square">Square 1 Content</div>
<div class="right_floated_square">Square 2 Content</div>
<div class="right_floated_square">Square 3 Content</div>
</div>
</div>
What this would do is flow these squares right to left at the bottom of the main div. However, these child squares would still flow top to bottom inside the container div. If you wanted them to vertically flow in reverse (bottom up), I'm not sure if that would be possible without some complex layout javascript.
Obviously, the exact styling of "right_floated_square" has been removed for brevity.
Here is a pure css version: http://jsfiddle.net/zkhWA/1/
Basically place your little squares in another absolutely positioned element that is grounded to the bottom right corner of the big square using:
position: absolute;
right: 0px;
bottom: 0px;
Then make all the little squares float right:
float: right;
Don't forget to apply position:relative to the big square.
I want to attach a sticky element(containing social media icons) to the right of my main wrapper which has a width of 960px and not stuck to the right side of the screen.
Any simple CSS ways of doing this?
Thanks
div#wrapper {
position: relative;
}
div#socialmediaicons {
position: absolute;
top: 0;
right: 0;
}
<div id="wrapper">
<div id="socialmediaicons"> ... </div>
</div>
"Absolutely" positioned elements will be positioned with respect to the closest parent element that is itself positioned.
There is a good jQuery plugin for this very need:
http://plugins.jquery.com/project/stickyfloat
Tt gives you powers beyond mere CSS.
Is there any way to start drawing divs from the same point? That means if I add new div and then I add another div, they will appear above each other. Because I want to move them all together depending on the same point.
CSS:
#num1,#num2{
display : inline
position:relative;
left:50px;
}
HTML:
<div id='container'>
<div id='num1'></div>
<div id='num2'></div>
</div>
So what should I add to this code so when the browser render this code the 2 divs will be on the same place?
All statements regarding absolute positioning are correct. People failed to mention, however, that you need position: relative on the parent container.
#container {
position: relative;
}
#num1,
#num2 {
position: absolute;
left: 50px;
}
<div id='container'>
<div id='num1'>1</div>
<div id='num2'>2</div>
</div>
Depending on which element you want on top, you can apply z-indexes to your absolutely positioned divs. A higher z-index gives the element more importance, placing it on the top of the other elements:
#container {
position: relative;
}
#num1,
#num2 {
position: absolute;
left: 50px;
}
/* num2 will be on top of num1 */
#num1 {
z-index: 1;
}
#num2 {
z-index: 2;
}
<div id='container'>
<div id='num1'>1</div>
<div id='num2'>2</div>
</div>
Use z-index to position divs on top of one another:
[http://www.w3schools.com/Css/pr_pos_z-index.asp][1]
So, you'll position the divs with absolute/relative positioning and then use z-index to layer them:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Make the first one position:absolute, which should take it out of the normal flow of the page.
some help.
I believe the only way to do this is to use absolute positioning
You can use absolute positioning.
#num1,#num2{ display : inline position:absolute; left:50px;top:10px; }