Having a page element in-background / below other elements?

views:

answers:

Having a page element in-background / below other elements?

I currently have two navigational links (arrows), but they tend to push other elements on the same height (a textarea in this case) away. The picture below illustrates the problem:

alt text

How do I make it so that the arrows won't interfere with, but exist on the same height as the textarea?

I'm left clueless, help is much appreciated :-).

+1 A:

use position:absolute on the arrows and position:relative on the container that they sit in. This way the arrows are effectively on another layer and will not affect other elements with their attributes (width, height). the position relative on the container is so you can set your positioning values relative to the container. use top:0 and left:0 for the left one and top:0 right:0 for the right one. Should be good to go!

lnrbob 2010-08-29 21:14:02

Thank you for your quick response, can't test it right now because my server just died (temporarily). I'll get back to you in a sec!

Chris 2010-08-29 21:18:19

I used the styles you suggested to come up with a solution, but in a different way: added "position: absolute;" to both arrow classes (left and right), then added "left: 0;" to the left one and "right: 0;" to the one which should be on the right.

Chris 2010-08-29 22:09:35

For your awareness this will place them at the left edge and the right edge of the screen of they are not childelements of an element which has position relative. They could therefore be out of place on a larger monitor. Personally I always specify a vertical position on absolute elements 1 because I like the control and 2 to ensure crossbrowser consistence. Glad it's working for you!

lnrbob 2010-08-30 08:28:20

ansaurus

tags:

views:

answers:

Having a page element in-background / below other elements?

related questions