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
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.
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.
I am trying to implement a grid like layout of images with their corresponding title absolutely positioned relative to that image.
usually when the parent is positioned relatively, the child position absolute works perfectly. Not in this case :(( No matter what I've tried I cannot get this to work.
Sorry had to delete the code as images no longer available.
Michaels solution worked.
Your .hero div has an effective height of 0. Give this element a height and your absolute positioning will work as expected.
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 have a div with position relative and z-index :-1. and I have placed <A> over that
div. But it seems <a> is not working when i give postion :relative to its parent. when change that
position to absolute it starts working. Could anybody tell me why this is happening.
I want that link to work and as far as possible need to keep its parent div
position :relative
and z-index:-1;
position:relative will make the z-index relative to the parent.
http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
Negative z-index cause a links to not work:
See this fiddle