So this is my code
<img src="http://s29.postimg.org/3lnt8f1s3 /32_facebook.png">
and the position is apparently absolute. But it doesn't "stick" to the side of the page. Any ideas? Here's a demo http://jsbin.com/kelagezo/1/edit
It sounds like you are confusing position: absolute with position: fixed.
Fixed positioning leaves the element where it is when you scroll.
You need to use
position:fixed
instead of
position: absolute.
See this fiddle: http://jsfiddle.net/v3GyF/2/
While you are at it, please try not to mix HTML and CSS. Its always a better policy to keep them seperate. This is called Seperation of concerns
It does stick to the left browser window edge. You don't need float:left when absolute or fixed positioning.
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.
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.
good people -
a js & css Q:
I have here a timeline, with an overlay. The positioning of the information-box that pops up is my problem.
http://dev.favouritesystems.com/appslist/
it has position absolute, and I wonder how I can get it relative to content not screen? geddit?
any hints appreciated.
Set the outer wrapper to relative, and keep the information-box as absolute. That way it will be absolute to the wrapper and not the body.
you need to add position:relative for your #wrapper then the popup will be positioned absolute according its parent
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".