How can you make an element that has a position: fixed display behind an element with position: static? Changing z-index doesn't seem to matter since they are not absolute.
You can use negative z-index on the fixed element.
<div id="fixed">This is fixed</div>
<div id="static">This is static</div>
#fixed {
position:fixed;
z-index:-1;
}
Fiddle Demonstration
Related
Is there a way to stick a div (#divA) to another div (#divB) that has left absolute position in pure CSS without javascript?
For example:
#divB {
position: absolute;
left: 100px;
}
I want that the #divA is attached to the left side of the #divB,
also if I dynamically increase the #divB left...
Update: my final objective is to manage the position of the others divs,
basing on the position of the div in the middle (div B in the picture)
staying sticked on it:
img http://www.sumoware.com/images/temp/xzpsxdkdnccotgoe.png
Just use absolute positioning with offsets of 100% to stick to the sides of the originator.
HTML:
<div id="a">
<div id="b">
</div>
<div id="c">
</div>
</div>
CSS:
div {
position:absolute;
height:50px;
width:50px;
}
#a {
left:100px;
background:red;
}
#b {
right:100%;
background:blue;
}
#c {
background:green;
left:100%;
}
Will give you exactly what you want.
Making something absolute takes it out of the normal flow. A block element gets its context from its nearest positioned ancestor(ie:fixed,absolute, or relative) element. One more thing to watch out for is inheriting unwanted margins, paddings, and borders. That being said...
According to your diagram you have a containing element, which you should use to position your 'set' of elements where you want. Putting "container -> subdivs = display:inline-block" allows you to dynamically add as many divs as you want. If something covers more than 1 element, make a class or direct it towards the children of an element. If it concerns 1 element, you may be better off with an Id. You can now absolutely position your desired sub and float the others...
Also, in order for empty divs to 'show' they must be positioned(or floating) and have a dimension.
#container{position:relative;padding:0px;margin:0px;
top:0px;left:400px;width:300px;height:105px;}
#container div{display:inline-block;}
.sub{width:100px;height:100px;padding:0;display:inline-block;}
#subA{float:left;background-color:red;}
#subB{position:absolute;left:100px;background-color:yellow;}
#subC{float:right;background-color:green;}
<div id="container">
<div id="subA" class="sub"></div>
<div id="subB" class="sub"></div>
<div id="subC" class="sub"></div>
</div>
I have a problem with footer positioning. It doesn't go to the bottom/last.
So, I have a container div which has 3 divs - float:right , float:left and the center one (which has position:absolute) that comes between the two floated divs.
The center one must have fixed width and height because it's an image.
In that center div I have another div with a lot of content.
The problem is, because the center div has fixed width and height, it doesn't take the childs div height.
So my problem is how to put the footer that it comes last (after the container)?
Note - with JQuery I put the width of the floated divs because they take 100%-980px width.
This is how it looks like.
I tried putting to the center div overflow:auto,overflow:overlay,margin-left:auto;margin-right:auto;.
After reading your question again an again i come to conclusion and create the below fiddle using your code and embed a sample image for you desired size.
Please let me know if i am wrong while understanding your question. So i can work around according your needs.
fiddle: http://jsfiddle.net/ah3nr/6
Demo: http://jsfiddle.net/ah3nr/6/embedded/result/
My approach:
I have remove the position:absolute from center div and added new div for image and relate them both using css layer techniques.
Updated css:
.sectionDownContainer {
width: 980px;
/*height:270px;*/
border:1px solid red;
/*position: absolute;*/
position:relative;
top: -32px;
z-index: 1;
}
/*.sectionDownMenu {
margin-left: 50px;
margin-top: 1px;
display: block;
}
*/
#image_container {
position:relative;
width:980px;
height: 270px;
margin-top:-2px;
z-index:2;
}
.sectionDownContent {
width: 640px;
margin-top: -190px;
margin-left: 50px;
position: relative;
z-index:5;
color:#000;
font-weight:bold;
}
Screenshot:
Try this for the parent.
overflow:auto;
Also refer to this stack overflow post: Expanding a parent <div> to the height of its children
You need to set this property of the center-div: height:auto (you could also add a minimum height: min-height:400)
About your second question with the footer, this is much more complicated. You must do this:
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
<div id="footer">
</div>
</div>
I'll give you now the full CSS (because it's not so easy):
.content {position:relative; overflow:hidden;} //hidden overflow just a hack for common issues...
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:auto; float:right} //for tests you can also set a fixed height
This solution is also according to other threads on Stackoverflow: Align DIV's to bottom or baseline, How to align content of a div to the bottom?
But, if you experience problems with that, you may do this (my preferred solution):
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
</div>
<div id="footer">
</div>
And its CSS:
.content {position:relative; overflow:hidden;} //hidden overflow is just a hack
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:xxx; float:left} //you can use any height...
Note that all above solutions works only if you set all the "contents" to float, it doesn't work with absolute values! I found this here: http://wiki.answers.com/Q/How_can_a_parent_DIV_wrap_around_child_DIVs_which_are_floating_left_or_right
This is due to an issue with divs: It's not possible to "tell" a parent div the size! So childs like "content_center" or "content_right" won't tell the "content" how long they are and how long "content" must be. So it's impossible to tell the footer where to align, if you use absolute values for the childs.
So your second question, although it looks trivial, is a very important question, and not easy to solve.
IMPORTANT UPDATE:
I tried to find a solution with absolute now. The problem is, that absolute and fixed are taken out of the regular (text)flow, so their size can't influence the size/positioning of any other element anymore. But we also have to understand that an absolute element still controls all its childs, so we should rather set the childs as relative than the parent (here: "content")! So I finally found the solution, and it's quite weird, because it's almost the opposite thing I suggested above, but that solution was influenced by the posting of others, while following solution is "my own" one (I added a header for demonstration purpose):
<div id="header">
</div>
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
<div id="footer">
</div>
</div>
The CSS (the "header" clearly shows, that "content" inherites all positioning to its childs like "content_left", "content_right", aso.):
.header {position:absolute; left:0; top:0; height:100; width:100%}
.content {position:absolute; left:0; top:100; height:auto; min-width:700} //min-width is only voluntary, but quite useful
.content_left {position:relative; left:0; top:0; width:200; height:auto;} //height:auto is important to adapt the height from containing text!
.content_center {position:relative; left:200; top:0; right:200; width:auto; height:auto;} //in the middle element, also auto-width is important!
.content_right {position:fixed; right:0; top:0; width:200; height:1000;} //we set a fixed position, but that won't influence the footer anymore!
.content_footer {margin:0 0 60 0; position:relative; left:0; bottom:-60; width:100%; height:150;} //a fixed height is also okey...but relative position is needed!
//you still need to add margin:0; border:0; padding:0 or similar values for some elements to get a good layout
The important point here is, that you can decide which child element will be the longest one, and set this element's position:relative, while the other may have absolute or fixed. But if you don't know which element will be the longest, all child's positions need to be set as relative. Anyway, I suggest to set all childs to relative (beside fixed if needed), because their parent "content" will set their absolute height-position already correctly, so there's no need for any absolute at all.
I'm repeating myself: Above I wrote it's not possible to tell a parent div the size...actually it's possible, but not if the values absolute and fixed are used. Only if you use the browser standart value (static) or relative, the parent div will be informed about the size of its childs, an therefore the footer is set correctly at the bottom of the page.
Well, my solution works everywhere...even in IE (tested 6.0 and 8.0!) due to the hack margin:0 0 60 0 where the value 60 should be the positive value of bottom:-60. Now we finally got the non-floating crossbrower-solution. ;)
The problem you're experiencing is that certain CSS properties cause elements to be "removed from the flow" of the document (see the W3C Visual formatting model). Parent elements naturally grow to fit the height of children elements, however, floated and absolutely positioned elements are removed from the document flow. As mentioned in a few comments, setting overflow: auto; or overflow: hidden; on the parent element re-establishes a bounding box around floated elements. This means you can float elements within the parent container, then set overflow: hidden; on the parent element, and the parent element will contain the floats. However, this doesn't work for absolutely positioned elements: the absolutely positioned box is "removed from the normal flow entirely (it has no impact on later siblings)". The only exception is that the entire document will try and grow to display any positioned elements (give an element position: absolute; top: 3000em; and the page scrollbar will grow to allow you to scroll to that element). I don't know of any way to trigger this for elements other than the document.
Back to your intended effect… If you don't need IE7 support, you can use display: table; table-layout: fixed; to achieve a centered column with a fixed width and two columns of variable width on either side.
jsFiddle Demo
In the near future, this will also be possible using the CSS "flexbox" properties. Flexbox will allow for some nifty new features, including horizontal and vertical centering, changing the order of rendered elements, and setting "flex" values for how much of the remaining variable width an element should take. However, the standard is currently going through a period of flux, and the old standard (enjoying moderate support) is being replaced by a new standard (with little to no support). See "Old" Flexbox and "New" Flexbox and the accompanying demo. Considering the glacially slow progress of web standards implementation, I don't expect to see this in use for a few years unless a truly masterful polyfill is produced.
The situation is:
HTML:
<div id="main">
<div id="a"></div>
<div id="b">Some Text</div>
</div>
CSS:
#a{
float:left;
width:800px;
height:150px;
background-color:#CCC;
}
#b{
width:1000px;
height:100px;
background-color:#9CC;
}
The result:
Why doesn't the text go behind div#a ? Why does "Some Text" behave as if div#a is still in the normal flow? How to force the text to act as expected (to go under div#a) ?
UPDATE:
When I mean under, I mean beneath on the Z axis, not on the Y. The div's should stay in this position, the only part that needs moving is the text.
http://www.w3.org/wiki/CSS/Properties/float
• leftThe element generates a block box that is floated to the left.
Content flows on the right side of the box, starting at the top.
The content of #b is acting as it should. It floats to the right side of the floated element preceding it.
Thus, if you want a 'layered' effect, use a CSS declaration that will provide it properly: position
Note: to keep #a positioned to it's parent, rather than <body>:
#main { position:relative }
#a { position:absolute }
If you float one element, the next element will "touch" it if there is place for it and it is a block level element (native or set by CSS).
If you want the elements "not" next to each other, than don't use float! Keep in mind that they have to be block level to go underneath each other.
Float does not "lift" element up, like for example position: absolute would do.
check out this:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I think z-index statement may also be useful
ADDENDUM
<style type="text/css">
<!--
#id {
position:relative;
}
#a{
/* float:left; */
position: absolute;
top:0%;
left0%;
width:800px;
height:150px;
background-color:#CCC;
z-indez:1;
}
#b{
position: absolute;
top:0%;
left0%;
width:1000px;
height:100px;
background-color:#9CC;
z-index:-1;
}
does the trick (in chrome, ff, IE6 ) I couldn't get it to work until I gave id=b a negative z index trust thats helpful
The floated element floats to the left of non-floated elements like the blue element. To force the blue element below the floated element, you could apply clear: left; to it.
If both of your div ID's have float:left assigned then the second div #b will follow suit and go beneath #a
Add this code:
float:left;
to #b style
Give display block to both #a, #b
I have a container div that has relative positioning, then another div inside that also has relative positioning:
<div class="first">
<div class="second">
<img src="img.jpg" />
</div>
</div>
I would like an image with absolute positioning to be relative to the "second" div not the "first". But I need them both to have relative positioning, how do I specify so the image is relative to the "second" div?
In the page hierarchy the image would be relative to .second; however, you must define the parent to be relatively positioned for the child to care.
see: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
.second { position:relative; }
.second img { position:absolute; top:0; left: 0 }
It is relative to the second <div> automatically according to the CSS standards, since it is nested in the second <div> and that div is positioned. Here is a quote from the CSS2 standard:
The containing block for a positioned box is established by the nearest positioned ancestor
So you count upwards in the DOM tree, i.e. from the nearest ancestor towards the document root, and stop at the first positioned ancestor (and if there isn't one, then it's the closest container, but that doesn't apply here). In this case, that will be div.second like you want.
.second img{ position:absolute; top:0; left:0; }
The positioning is just an example; you can change it to suit your needs.
what is difference between relative position and absolute position is CSS
eg
.style
{
position:relative;
}
.style
{
position:absolute;
}
From W3schools:
Absolute
Generates an absolutely positioned
element, positioned relative to the
first parent element that has a
position other than static. The
element's position is specified with
the "left", "top", "right", and
"bottom" properties
Relative
Generates a relatively positioned
element, positioned relative to its
normal position, so "left:20" adds 20
pixels to the element's LEFT position
Also check this page, it will give you very nice overview about positions in CSS.
The standard describes it here: Comparison of normal flow, floats, and absolute positioning
Is there something in particular about this which you don't understand or want explaining further?
With relative you can position the element relative to its original position and the original space is still holding the item.
Absolute takes the item out of the regular flow of the HTML and you can position it relative to the parent element.
Here is a good tutorial about that:
http://jimbojw.com/wiki/index.php?title=Position_absolute_is_really_relative%3F
Use relative when you consider range to parent element or elements before.
Use absolute when you want to make an element in inviolable position.
You can also learn the difference between margin-left and left css property for relative and absolute
<html>
<body>
<div style="width:300px; height:200px; margin:auto; background:red">
<div style="position:relative; left:10px; top:20px;">
test
</div>
<div style="position:relative; left:10px; top:20px;">
test
</div>
<div style="position:absolute; left:0; bottom:0px;">
test
</div>
<div style="position:absolute; margin-left:0; margin-bottom:0px;">
test
</div>
</div>
</body>