I have a div with a fixed position, but I want it to stay in the same position when my browser screen is increased or decreased in width. Since I have margin:auto acting on the surrounding html objects, it changes its position relative to the surrounding objects. I do not want this to happen. How can I fix this?
This is my css so far:
position:fixed;
top:45px;
left:930px;
Based on your third comment, I believe you might find my solution to a previous problem similar to this to be your solution: Position element fixed vertically, absolute horizontally.
Related
I have a table with some data but I want to use one cell for displaying more divs. Each of divs has different exact width and position from the left.
I tried it with position:relative but position of each next div depends on the divs on the left and I don't want that I want each div in that cell to be exactly x pixels from left of the cell border.
I also tried position:absolute but this does go really to the <html> tag as they write here http://www.w3schools.com/css/css_positioning.asp:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
Now I'm not sure how to solve my problem.
My example: http://jsfiddle.net/6wSAJ/465/
(Made from accepted answer from here: Relative positioning of two divs)
Edit: I guess I forgot to mention that I need it to work in IE8.
Edit 2: http://jsfiddle.net/6wSAJ/468/ The problem I was dealing with is that if I set the cell relative it completely ruins my real problem table so I have to make divs with relative position around the divs I want to be positioned absolutely. I didn't do that at first cause I always want to try to style the elements I have and add new ones only if really necessary.
You should make the wrapping divs a relative position so the absolute position will apply on inner elements:
position: relative;
jsFiddle Demo
Note that you can't give a table-cell a relative position for it's not standardized and will work unexpectedly.
For further reading:
position - CSS | MDN
Learn CSS Positioning in Ten Steps
Hi, I am trying to position two images next to each other and have one of them overlap the other one in a corner.
I have tried using the z-index property but this does not work unless i set the position property to something like fixed or absolute and this messes up the layout of my site.
I was wondering that although i have an image container with the width and height set, can i possibly cut out a section of the container like a rectangle to let the image sit inside the cut like the image below me.
Is this possible?
Thanks!
position:relative positions the element relative to its normal position, and pretends, for document flow, that the element is still there. See this example:
http://jsfiddle.net/GtJMF/
position: relative;
I can't see how having a position:absolute for this scenario would mess up your site.
Put position:relative on your "Image Container". Put position:absolute; right:0, bottom:0; on your "Cut out part" (assuming it is also in the Image Container). This will give you the exact effect you are looking for.
Positioning is relative to the containing positioned parent. Just a position:relative is enough make an element a "positioning master" that all interior positioning will use for its coordinate system.
position:relative also "enables" z-index, but unlike absolute and fixed it doesn't mess up any of the rest of the layout.
Struggling a bit with HTML positioning. I'm sure it's a pretty simple problem, but just can't crack it.
Please see fiddle: http://jsfiddle.net/HMyXW/2/
Basically, I am trying to position the yellow div (#logo) above everything else, so it will push any other content on the page down, even if the screen is resized vertically.
I've tried messing with z-positions, etc. but am not having much luck.
I suggest remove all the fixed positions if it is not necessary and add a outer div to wrap all the child divs.
Check this DEMO
If it is necessary to use the position:fixed to the #logo then you need to check the height of the #logo and give the same value as margin-top to the content div.
Your #logo has position: fixed; which means the element is removed from the normal page flow.
Is there CSS which can allow an element to follow flow (similar to position:inline), while a child to the element has position:absolute?
EDIT: the answer is yes, just use inline and position absolute. I had a different issue than the one I posted. My apologies. My issue was that using margin:auto made the item centred, but gave all margins 0 rather than the maximum amount (ie. the container would spread as far as it could and the border would generally touch the border of the parent element). To solve the issue I'll be using an additional container and text-align.
Thanks to the people who helped and read this question.
Ignore the following historic portion of the post.
Obviously I want the position absolute to be positioned relative to
the bounds of it's parents (so the parent would not have
position:static).
Still I am unsure how to do this. Does CSS even have the expressive
power to do this?
Think of having a picture in the middle of a paragraph, but instead of
an image, it's a container with more elements inside.
Basically what you are looking for is position:relative;
Position relative retains the normal flow position but allows coordinate modifications. Using the css values top and left, for example will move the object relative to where it should normally be placed. If you nest the object inside a div, it will use the div's top left corner as the 0,0 coordinate origin.
Keep in mind that the position:relative property is applied to the elements inside your parent container and not the parent itself. You can use static or whatever you'd like for the parent. However, the parent won't necessarily resize to encapsulate its relatively positioned children visually, so you will have to set height and width values yourself.
<style type="text/css">
#my_button {
position:relative;
top:10px;
left:10px
}
#my_div {
height:25px;
background-color:yellow
}
</style>
<div id="my_div">
<input type="button" value="OK" id="my_button"></input>
</div>
Use position:relative; That way the parent stays in the same location but child elements with position: absolute are positioned relative to the parent not the body.
What's the recommended & most elegant way of getting rid of the gap caused by position:relative?
I have a front page and want to put a banner that will be partially above the header and content section, but using position:relative produces an empty area...
See example (I want the text to be just below the red box):
http://jsfiddle.net/Ru2CT/
I know I could create another relative positioned div as a parent of my text, but then I'll still have the gap but between content section & footer...
Any ideas? :)
Take the entire contents of the grey box, and place it within a div (stretched to be the same size). Then move that box up with position:relative. This will have the effect of moving the text with the red "slider"/banner thing, without moving the gray background.
Here we go:
http://jsfiddle.net/4BLFJ/ [animated and annotated]
This is not what you asked, but is one of the two ways I would do it:
The main idea here is to make the banner an absolutely-positioned div (not absolutely-positioned on the page, though you can do that too; it may in fact be better).
First set the #content area to be position:relative, but NOT change anything else. This creates a new stacking context (child elements use top/right/bottom/left and percentages relative to it).
Then put the banner-thing as a child element of the #content area, and set it as follows:
position:absolute;
width:80%; height:100px; /*there are other ways to set the height and width*/
bottom:100%; /*this puts it at the top*/
/*you can also use bottom:105% or bottom:90% or other things, or if you really
want to use non-relative units like px, you can create a third nested div that is
relatively positioned by whatever px amount*/
Negative margin would be a much more elegant solution in this situation (revised jsFiddle). Note that I've had to move the #eee background to div#main, as it would otherwise overlay on the background of div#top.
As a general rule of thumb, I'd also recommend avoiding relative positioning unless absolutely necessary - can often lead to z-index headaches in older versions of IE.
I've finally resolved this issue, simple:
position: relative;
bottom: 200px;
margin-bottom: -200px;
Does the magic! :)