In FireFox 3.5, the following div does not push the page content down. Rather, it overlaps. IE 8 does not. What can I do as a quick fix?
<div style="position:fixed;top:0;width:100%;">blah blah</div>
position: fixed means, that the div should stay absolute to the view point (to the browser window). You can use for real absolute positioning:
position: absolute;
Should this be "Absolute" rather than "Fixed"
It should overlap, position:fixed does that. Switch it to static or remove position. In both cases top becomes meaningless.
Position fixed: You can set the elements location by setting top right bottom and left. This will contain distance from the browsers border.
Position absolute: The same but now top right bottom and left will need the distance from the first parent which has "position: relative".
Related
I want to insert a div into a page, put div into the coordinates that I want, but do not move the rest of the page content
What I had done is to put the parent container a position: absolute and the div that I want to have floating a position: relative and then go tell the px to position it where I want, but doing so the content of the page moves me Site, and I would like you not to move the rest of the content even if the div is above it.
What could I do ?
Instead of floating it, you'll need to position your div with either position: absolute or position: fixed.
You have to set position: absolute to the float div instead of the parent div.
It should be possible with CSS. I would try setting the html tag to be relative and the div you want to absolute (if no other tags are set to relative). Otherwise I would recommend jQuery for the solution.
The documentation was pretty hard to understand since I am new to CSS. So can anyone please explain the actual difference between position:sticky and position:fixed? I would also appreciate an example.
I have gone through https://developer.mozilla.org/en-US/docs/Web/CSS/position and a few other articles, but I still don't get it.
position: fixed always fixates an element to some position within its scrolling container or the viewport. No matter how you scroll its container, it will remain in the exact same position and not affect the flow of other elements within the container.
Without going into specific details, position: sticky basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view. It eventually gets unstuck as it gets scrolled back toward its original position. At least, that's how I understand it in theory.
The reason why I want to avoid going into details is because position: sticky is brand new, experimental (as shown in the document you link to), and not finalized yet. Even what I've stated above may well change in the near future. You won't be able to use position: sticky yet anyway (hopefully this will change within the next year).
Mozilla recently presented its implementation of position: sticky here. It's highly worth a watch.
See this self-explanatory example for better clarity. CODEPEN
Fixed Position:
An element with fixed position is displayed with respect to the viewport or the browser window itself. It always stays in the same place even if the page is scrolled.
It does not effect the flow of other elements in the page ie doesn't occupy any specific space(just like position: absolute).
If it is defined inside some other container (div with or without relative/absolute position), still it is positioned with respect to the browser and not that container. (Here it differs with position: absolute).
Sticky Position:
An element with sticky position is positioned based on the user's scroll position. As #Boltclock mentioned it basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed. When it is scrolled back it gets back to its previous (relative) position.
It effects the flow of other elements in the page ie occupies a specific space on the page(just like position: relative).
If it is defined inside some container, it is positioned with respect to that container. If the container has some overflow(scroll), depending on the scroll offset it turns into position:fixed.
So if you want to achieve the fixed functionality but inside a container, use sticky.
Let me make it extremely simple.
fixed position will not occupy any space in the body, so the next element(eg: an image) will be behind the fixed element.
sticky position occupies the space, so the next element will not be hidden behind it.
Following image is fixed some part of image is hidden behind navbar, because Fixed element doesn't occupy space. You can solve this by adding margin or before/ after pseudo classes
This eg is of sticky position. Here Image is fully shown, nothing is hidden behind navbar because sticky elements occupy space in the document.
Suppose you have a navigation bar at the top of your website and you want it to be fixed so that as you scroll down the page, it's always visible.
If you give it position: fixed; then the page content at the top will be hidden below the navigation bar. In contrast, if you decide to give it position: sticky; top: 0;, the navigation bar will remain in the flow of the document, and gracefully pushes the content underneath it below, so no content is hidden.
When you apply position: fixed; the navigation bar escapes from the normal document flow, similarly to when you float an element.
fixed get fixed on both X and Y axis while sticky is fixed on X axis only.
sticky will be fixed only till the end of the container, but fixed will be fixed until the end of the webpage.
Fixed and Sticky both are very similar but there is one important difference between them -
1. position:fixed : It will directly fixed the element at provided location using top,bottom,left,right.
<div style="position:relative">
<p style="position:fixed; top:0px">paragraph with fixed position</p>
</div>
- here paragraph with fixed position will fixed always at top:0px.
2. position:sticky : It will not directly fixed the element at provided location. It will move element with scroll initially. It will fixed the element only if element reached to specified location using top,bottom,left,right. Until it will move with scroll.
<div style="position:relative">
<p style="position:sticky;top:0px">paragraph with sticky position</p>
</div>
- here paragraph with sticky position will fixed or stick only if element will reached to top 0px position.
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.
I set up 4 bocks in perfect allignment using absolute positioning. My understanding is that this is that you basically setup the x,y location of each block using top, left and the parent element is the origin. All worked as I expected and I marvelled at how nice things worked. Than I hit the zoom button in IE 9 and although the y coordinates maintained there state...the x cooridanates shifted to the left..some even past the parent element..which makes even less sense b.c. I did not specify any negative values. Why would zooming effect the absolute positioning?
Zooming changes the size of these elements but not it's position. But I don't know how to prevent that, I think you cannot do anything against that because it's caused by the browser.
The only possibility is maybe checking the size with JavaScript, maybe it's possible to recognize this with JS, but that would be very difficult. Anyway, is it important that it works while zooming?
If your 4 blocks are identical in height and width, you could do this:
div.block { height: 200px; width: 400px; float: left; }
Then put them into a container that only allows two blocks side by side.
Example Fiddle:
http://jsfiddle.net/u5xVa/
Your absolute positioned elements are currently positioned relative to the <body> tag's top/left position (which is always 0px/0px).
But you have a centre aligned layout, with margin-left: auto; margin-right: auto; and you want the absolutely positioned elements to line up with that perfectly.
Say you use zoom to make the page smaller by 50%. This will reduce the left position property by 50% and reduce the width of the margin:auto; element by 50% (triggering the left/right margins to be increased by whatever the width change is!).
So, zooming the page smaller makes the margin on the centred element bigger but it makes the absolute position coordinates smaller.
To make it line up perfectly, you need to make the absolute positioned elements relative to the element with margin-left: auto;.
In your specific example I would do this:
div#Ab1
{
position: relative;
}
div#Ab1_2
{
position: absolute;
top: 80px;
right: 0px; /* note: setting a right position, not a left position */
}
/* and do the same for div#Ab1_4 and div#Ab1_4_under */
Does that make sense?
PS: the reason it worked locally and then was broken when you uploaded, is you probably weren't viewing the page at the default zoom level on one of them.
There are many ways to do this right...but what I ended up doing and what makes most since to me is to set up an x-y coordinate plane and position your elements using margins or top and left attributes. To do this I set the parent div to relative positioning to make it register as the "origin" and then set my four square divs as absolute positioned. This works well. What through me off is that you have to set the parent div of you your absolution positioned elements to a non-static positioning.
Don't avoid tables if they are they right way to go - aligning 4 blocks left to right, top to bottom, is easiest done with a table, imho. You can use div with float left and right and junk like that, but the cells in a table never shift out of alignment.
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.