Question

I have a white page with only a 500×250 textbox and an image. The page is fluid.

I’m trying to center the textbox at the center of a page, while having a picture fixed to the bottom left of the screen. I partially achieve this with the following css:

.bottom-right { /* used to fix the image to the bottom of the screen */
    bottom: 0;
    right: 0;
    position: fixed;
}

#content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50%;
    width: 500px;
    height: 250px;
    position: relative;
}

When I vertically resize the window, the image covers the textbox. I would instead like the text to go up.

Answer 1

If I’ve understood your question correctly, you need to have the “textbox” always over the image that’s fixed on the bottom-right corner.

See this working Fiddle Example!

CSS

#content {
    width: 500px;
    height: 250px;
    position: absolute;          /* this is the key */
    z-index: 1;                  /* this is the key */
    left: 50%;
    top: 50%;
    margin: -125px 0 0 -250px;
} 

---

• CSS position:absolute;

  What this does is to place the element #content outside the normal document flow, thus not being affected by other elements or having impact on the layout of later siblings.

• CSS z-index:1;

  What this does is to move the element up on the document stack, thus placing it over others with a lower value (the default stack level is 0).

See the CSS absolute and fixed positioning – W3C Wiki for further details.