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.
Related
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.
How do I specify a position for the form generated part of this page and then use inline CSS to place elements around it?
https://org2.democracyinaction.org/o/6351/p/salsa/event/common/public/?event_KEY=50926
Our half-baked temporary solution uses multiple Absolute elements. Unfortunately, these perform differently cross-browser and are especially bad on mobile (resulting in overflow and scrolling within the page elements).
Here is my addition to the external stylesheet, to move the form generated registration box up and to the left:
#regForm {width: 400px; position:absolute; clear:left; top:315px; }
Here are my inline attempts to arrange div elements around it:
<div> top element (quotes)
</div>
<div style="height:2400px"></div>
//I put this in to keep the bottom page border from overlapping the absolute divs
<div style="position: absolute; top: 350px; left: 450px; width: 520px;
overflow: auto; margin: 0px; padding: 0px;">
right column (of explanation text) </div>
<p></p>
<div style="position: absolute; top: 815px; left: 15px; width: 400px;
overflow: auto; margin: 0px; padding: 0px;">
left column (more info about the #regForm box above, plus images) </div>
What we need to achieve:
[ top element ]
[#regForm div] [right column ]
[left column ]
Constraints:
we are reformatting a form generated page. I have one input panel where we can add HTML content to the page and use inline CSS. We also have access to add override elements to the external CSS stylesheet, but not to directly edit the whole stylesheet.
tl:dr version: how do you use CSS to move an element (in this case #regForm) higher up in a page when you don't have access to edit the HTML that generates that element? Without styling, the #regForm element just gets appended to the end.
If you want the page to flow properly AND have #regdiv appear first, you could float the columns and the form, and then move the form up in the document tree with jQuery.
An example in jsFiddle: http://jsfiddle.net/TjDmw/11/
HTML:
<div id="container">
<div id="rightcol"></div>
<div id="leftcol"></div>
<div id="regdiv"></div><!--Last in HTML, but moved up with jQuery-->
</div>
CSS:
#container {
border:2px black solid;
width:400px;
float:left;
}
#rightcol{
background:red;
width:200px;
height:400px;
float:right;
}
#leftcol{
background:blue;
width:160px;
height:450px;
float:left;
}
#regdiv{
background:green;
width:140px;
height:220px;
float:left;
}
JS:
$('#regdiv').insertBefore('#rightcol');
i am trying to code an html with 2 divs inside a div.
There is a parent div with no width or height.. the width is the browser width and the height is not specified.
I want inside this parent div, 2 divs: 1st one needs to have a width or 250px and the 2nd one needs to have the rest of the screen's width. They both are missing the height.. depending how much content there will be inside it.
Now i was trying to make it like this:
<div id="calendar">
<section id="list">
</section>
<section id="grid">
</section>
</div>
and the css like this:
#calendar {
margin: 0 auto;
position: relative;
overflow: hidden;
}
#calendar #list {
background: #f00;
position: absolute;
width: 250px;
left: 0;
top: 0;
}
#calendar #grid {
background: #0f0;
position: absolute;
left: 250px;
top: 0;
right: 0;
}
now the problem is, the parent div doesnt resize when i add content to the children divs
I hope there is a workaround with the CSS to solve this cause it would be bad to do it via JS.
Thank you in advance,
Daniel!
Here's my solution -> http://tinkerbin.com/Z8mJmItU
Float the #list with its given width, then give #grid the same margin-left.
Then to get both columns to look like they have 100% of the height of the parent-container you need an image. Before you'd have to use an 'actual image'. Today you can simply rely on css3 gradients for backgrounds making your page load faster (1 less http request for the image). It may seem more complicated, but it actually isn't 'that' complicated. It even ends up giving you more flexibility since you can change the width and color of the columns without needing to create a new image. All you need is to change the css.
You need to specify a height if you are going to use absolute. Then it should work.
EDIT
use
position: relative;
on the child elements.
EDIT 2
Perhaps this post would help with what you are after? Div width 100% minus fixed amount of pixels
Don't use positioning, use float ... with your current method the parent will collapse and the only way to determine the required height of the parent, would be to calculate the height of the highest child element (typically, with JavaScript).
<div id="calendar">
<section id="list">
</section>
<section id="grid">
</section>
<div class="clear"></div>
</div>
... and the CSS ...
#calendar {
margin: 0 auto;
position: relative;
}
#calendar #list {
background: #f00;
float:left;
width: 250px;
}
#calendar #grid {
background: #0f0;
margin-left: 250px;
}
.clear{
clear:both;
}
This way the #calendar will adjust in height to the tallest child element. Also remember to remove the overflow rule.
... the above for the sake of being brief, you should probably look at using clearfix (by adding a class to #calendar) - read more here.
I'm having problems working out the z-index order for an application we're working on, i have two root parents, a nav bar and a map, and one child, the map tooltip. The navbar should be visible above the map, so it has a higher z-index, but the problems is to make the tooltip in the map container to be displayed over the sidebar as well, a bit hard to explain, so you can visualize the case on http://jsbin.com/afakak/2/edit#javascript,html,live :
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
Thanks for any help.
If #map-container is positioned (i.e. not static), this is not possible, because of the way z-index is compared:
body (or any other positioned parent element) is the reference for both #map-container and #nav-bar. Any z-index you give them is calculated in respect to the parent element. So the one of the 2 elements with the higher z-index will be rendered above the other one and all its child elements. Z-index of #tooltip will only be compared with other children of #map-container.
You could do as Nacho said and statically position #map-container. You can simulate fixed positioning via Javascript, if you like.
If you cannot do that, you need to change your markup, so that #nav-bar and #tooltip have a common positioned parent element. Either move #nav-bar inside #map-container, or #tooltip out of it.
Below solution should work but I don't know if you have a requirement like keeping nav-bar outside map-container. If so I don't think that there is a workaround for that.
CSS:
#tooltip-helper{
position:relative;
/*below properties are to demonstrate the helper*/
width:10px;
height:10px;
background-color:green;
top:200px;
left:200px;
}
#tooltip
{
position:absolute;
top:10px;/*this is just to make sure helper is visible*/
left:-100px;/*this is to center the tooltip*/
width: 200px;
height: 200px;
background-color: yellow;
color: black;
padding: 10px;
z-index: 15;
}
HTML:
<div id="map-container">
<div id="nav-bar">
The nav bar
</div>
This is the map container
<div id="tooltip-helper">
<div id="tooltip">This is the Tooltip</div>
</div>
</div>
You have to absolutely position nav-bar and tooltip (otherwise z-index won't be taken in account), and maintain map-container static positioned
#map-container{
...
position: static;
...
}
#nav-bar{
...
position: absolute;
}
#tooltip{
...
position: absolute
}
I think the only way you can do this with a position: fixed on the #map-container is to restructure your tool tips to display outside the #map-container. So on click of the icon "inside" the map container, the tool-tip itself is displayed above both (with a proper z-index set).
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
</div>
<div id="tooltip">
This is the Tooltip
</div>
After going through, your codes, i noticed this.
#tooltip{
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
}
Your #tooltip has a z-index, but it's not positioned. Z-index property will only work if it's has one of the position property value. And considering you want the tooltip to stand out, you should use the absolute position value like this.
#tooltip{
position: absolute;
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
}
HTML
<div id="map-container">
<div id="nav-bar">
The nav bar
</div>
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
This keeps the #tooltip on top....
For future readers with similar problems -
If your conflicting child items are position: fixed, consider setting the height of the parent containers to 0px, and then shifting any parent background display settings onto a mutual grandparent of the conflicting children.
This solved my analogous delimma.
If, in the real page, the tooltip has to be shown only on hovering the map container, you could just change dynamically its z-index like so:
#map-container:hover
{
z-index: 16
}
Otherwise you need to change the position of the tooltip so that the nav-bar doesn't overlap it.
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; }