CSS Positioning Issue...

by 3 replies
4
Hey all,

I very rarely use positioning on my websites, but I'd love to have a graphic hovering over a part of a new site I'm working on.

Ideally I'd like to use CSS to accomplish this.

The Super Marketer :: Internet Marketing Business Tips

The arrow should hover over the right-top side of the header.

Using absolute positioning, depending on how big the users screen is, the position changes.

Using relative positioning, I end up with a bunch of white space - I understand why, I'm just not sure what to do about it.

I'd love to hear any ideas you have about how to resolve this issue.

Thanks.
#website design #css #issue #positioning
  • Hi Chris, the key to this is that you need to use BOTH relative and absolute positioning to do what you want.

    First, you need to apply a position:relative attribute to the parent container of the item you want to absolutely position. This resets the bounds for your positioned element so that its boundary becomes the parent container vs the entire window viewport (or the next parent container that's relatively positioned).

    Next, you need to absolutely position the target element (the child of the relatively positioned parent container) and set its position as right:x, where x is the amount of space in pixels that you want between the element and the rightmost border of the parent container.

    Clear as mud?
    • [ 1 ] Thanks
    • [1] reply
    • Scott, you're a genius. I've been Googling this and couldn't find a single solution.

      It looks great and I can resize the window without it moving anywhere.

      Thanks a ton!
      • [1] reply
  • Banned
    [DELETED]
Join the discussion

Next Topics on Trending Feed