Find solution
How to animate the imageview outside of its parent layout?

Within CSS, can I specify an exact x and y coordinate for an object relative to it's parent container?

  • I want to be able to layout a DIV in exact X,Y, height, width  coordinates relative to a page. I also want to be able to provide x,y coordinates for HTML elements relative to the DIV its contained within.  Is this possible to do with CSS attribution?

  • Answer:

    Yes, you can. Set the parent container's "position: relative". This tells the browser that the positioning of child elements should be relative to the parent container, not relative to the page itself. Set the child element's "position: absolute". Use "left: [x-value]px" and "top: [y-value]px" to position the child element. For example, setting the child element to "position: absolute; left: 20px; top: 45px;" will position the child element 20 pixels from the left and 45 pixels from the top of the parent container.

Andrew Hamada at Quora Visit the source

Was this solution helpful to you?

Other answers

Yes. This is possible with CSS positioning. You really need to understand the following values of position in order to do this properly: position: static - The default value for position. This basically says "let the browser lay this thing out without any special positioning". position: relative - Allows you to position an element relative to it's static position using the offsets provided by the top, right, bottom and left properties. position: fixed - Allows you to position an element relative to the viewport (browser window, essentially) using the offsets provided by the top, right, bottom, and left properties. position: absolute - Allows you to position an element relative to it's first non statically positioned parent using the top, right, bottom, and left properties. If there is no non-statically positioned parent, the <html> element will be used What you want is essentially to use position: absolute on the div you want to position and then top, right, bottom, and left to control the exact positioning. However, if you just do this, you'll notice that the element positions itself relative to the <html> element. If you want to position it relative to something else (in your case, it's direct parent), you'll need to give that element a non-static position. Anything that's not position: static will work here (even another position: absolute) but in most cases, you likely want that parent element to just stay where it is without any special positioning. So in order to give that element "non-static positioning" without actually moving it from it's static position, you can actually give it position: relative, but don't specify any values for top, right, bottom, or left. This way you are positioning the element relative to it's static position by 0px. So to position something relative to it's container (or any ancestor for that matter) you need to: Set the container/ancestor to position: relative Set the element to position: absolute Give the element values of top, right, bottom, and left values as you see fit

Dillon Grove

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.