:)
when i dont set top/left properties for an element fixed what acccured??
please see this sample code:
#fixed-menu{
background-color:#ba4444;
border-top: 5px solid #0892cd;
height: 60px;
position: fixed;
width: 100%;
z-index:9999;
box-shadow:rgb(128, 128, 128) 0px 5px 15px 0px;
}
#wrapper{
height:900px;
width:960px;
margin:0 auto;
background-color:yellow;
margin-top:100px;
}
<body>
<div id="fixed-menu"></div>
<div id="wrapper"></div>
<body>
with above code,fixed-menu also have 100px margin-top!!!!why?????
...................
how calculated top property???
Once an element has been fixed with position: fixed, the three properties left, width and right together determine the horizontal position and size, relative to the window. (CSS uses the more general word viewport; a window is an example of a viewport.)
You need at most two of the three properties, i.e., left & width, right & width, or left & right. Setting just one of the three, or none at all is also possible. In that case, CSS will use the element's natural (“intrinsic”) size and/or position, as needed, for any properties that are left at their default value ('auto').
The same holds for the trio top, height and bottom. You need to set at most two of them: top if you want to control the distance from the top of the window, bottom to control the distance from the bottom, and height if you want to specify a fixed height.
I hope that answers your question. For further reading you can refer to this link
Tip : Fixed position is free flow guy in the document window. Based on the element present before the fixed element aligns itself next to it.
In your example there's no elem before fixed div but the following wrapper div you are setting the margin top to 100px. which affects the viewport. So you can imagine the viewport for fixed element starts below the 100px mark set by the wrapper div.
you can see removing the margin in wrapper div or set the wrapper position to fixed with margin top 100px. you will get the idea.
Related
I am trying trying to make a div's width as wide as it's content. Here's a fidle to show what I mean:
http://jsfiddle.net/djxpU/
I want the blue area to be as wide as the white. I tried float:left and display:inline-block, however they won't work with position:absolute;. Any workarounds?
If you want the white area to fit the blue parent, you'd set the width of the white to 100% #X{
width:100%;
}
Block-level elements actually do this naturally. The problem you have is, absolute positioned elements are taken out of the normal flow, so the block can't wrap around your white boxes.
Is there a reason you need them positioned absolute?
EDIT: If you just wanted the white boxes to be centered, here you go: http://jsfiddle.net/Marconius/djxpU/1/
Code (because I have to): margin: 0 auto;
By default a div will be the width of its parent and will display as block. Here is an example of the divs filling the available space while still maintaining the left margin.
Apply this to your 'X' divs: { margin-left: 120px; height: 40px; background-color: white;}
http://jsfiddle.net/yz3Dk/
I have following code:
<div style="border:4px solid black;width:100%;height:100px;position:fixed;left:250px;">
out of bound :(
</div>
I want it not to cross the window. I need its right border to stay visible.
JSFiddle link: http://jsfiddle.net/9SZAB/
Remove the width property and instead use right: 0:
div {
border:4px solid black;
height:100px;
position:fixed;
left:250px;
right: 0;
}
Updated fiddle: http://jsfiddle.net/9SZAB/2/
Why this works: position: fixed tells the element to have a fixed position relative to the viewport, so that the positioning properties left, right, top, and bottom, as well as width and height will position and size the element based on the size and boundaries of the viewport.
Previously you had width: 100%, which, combined with position: fixed, means that the element's width should be 100% of the viewport's width. This width is not and should not be affected by any margins or positioning that you also set - the element will still have 100% of the viewport's width, no matter where it is.
But if the element has a width value of auto (which is default), then the positioning properties can be used to size it. Just as left: 250px means that the left side of the element should be 250px away from the viewport's left boundary, right: 0 means that its right side should be 0 (px, em, parsecs - unit doesn't matter for a value of 0) away from the vp's right boundary. Resize the viewport and this state will still be true.
more info: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
I have to create a div that has a paper texture to it, with rounded corners. When the content inside grows, this div should grow along with it and not ruin the bg..
So to do this, I made the main div with the content, and made it repeat the center of the bg and set the height to auto. I made a div for the top and bottom parts of it with the textures and rounded corners. I used absolute positioning relative to the content div so when it grows, the bottom bg will be below the content div at all times.
Everything looks good BUT, the top and bottom divs are covering the content div. I can fix this by leaving a large gap at the top and bottom of the content div but it looks strange having such a large gap.. and its improper.
Any ideas around this?
Try adding a margin to the top and bottom of the content div (ie. margin: 20px 0 30px 0; where 20 is the height of your top div and 30 is the height of your bottom div). Also, can't you just put the three divs in a container and position them relatively, one stacked on another?
Example:
<div id="container">
<div id="top"></div>
<div id="content"></div>
<div id="bottom"></div>
</div>
It´s hard to say without looking at your code, but I think your problem can be easily solved by adding a top and bottom padding to your main div, the size of the top and bottom parts.
Edit: An alternative would be to put your content in another div in the main div and abandon absolute positioning. Just put all three divs one after the other and use negative margins to pull the content up over the top div and do something similar for the bottom border.
Use z-index: http://www.jsfiddle.net/xPEY6/
(Per the CSS spec you don't actually need the .text div, you could set .top and .bottom to z-index: -1 and .container to z-index: 0, but I wouldn't rely on all browsers implementing that detail correctly.)
You can do this with positioning:
div.paperTexture {
position: absolute;
top: 0px;
bottom: 0px;
}
Also works well if you need the div to take up 100% of the viewport minus Xpx. Just set the top or bottom to Xpx.
I have a div directly under the body. My HTML looks like this:
<body>
<div class="parent"></div>
</body>
And the css I use is this:
.parent {
border:1px solid black;
bottom:10px;
position:relative;
top:100px;
width:500px;
}
This div doesnt stretch to the entire viewport/available body height. However, if I change the position to absolute, It does stretch.
Is there a way to get a relative positioned element to stretch to its container element height. I tried height 100% as well and it works but it gives a vertical scrollbar to me as the element is positioned at 100px from TOP.
The terms top, bottom, left and right are generally used for absolute positioning. If you want a div container to be as big as it's parent's container, then you have to specify through the terms height and width, and use a percentage or integer with a measurement scale attached such as 'px'. If you are worried about a scrollbar, just use the rule overflow:hidden;