Web Development & Execution
David Addison
by David Addison
share this
?fl
« Back to the Blog

How to use css to position a div relative to a fixed position div

03/23/2010
How to use css to position a div relative to a fixed position div

It sounds like an oxymoron, positioning a div relative to a fixed div. However consider this, you have a page that is already positioned center using margin: auto. Next you have a flash element that needs to go to the bottom of the page. Your first approach is to use fixed positioning and set bottom: 0px. However when you resize the page the flash element moves relative to the edge of the browser, and not the edge of your page. Or maybe you want your flash element to appear in a particular place despite different resolutions.

Here is my solution. First you make a container div that is 100% of the page width. Next you create a second div that holds the flash object. The containg div is fixed positioned to the bottom of the page, with text-align: center. This means that all of the content will be centered and you can now mix and match fixed and relative positioning.

The following code demonstrates how to position an element to the bottom of the page, but to maintain the same position relative to the content even if the page is resized:

.flashcontainer 
    {
        z-index:999;   
        position: fixed;
        width: 100%;
        text-align: center;
        bottom: 0px;
    }   
    .flashobject 
    {
        position: relative;
        z-index:999;               
        left: 200px;
        top: 30px;
    }

    <div>

        <div>

           /* flash object code */

        </div>

    </div>

Thanks!

Thank you for contacting us!

We'll be in touch!

Back Home ×