4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

CSS Positioning Issue...

by Chris Ramsey
3 replies
  • WEB DESIGN
    • |
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.
#css #issue #positioning
  • Profile picture of the author clickbump
    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?
    Signature
    {{ DiscussionBoard.errors[1911265].message }}
    • Profile picture of the author Chris Ramsey
      Originally Posted by clickbump View Post

      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?
      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!
      Signature
      {{ DiscussionBoard.errors[1911338].message }}
      • Profile picture of the author clickbump
        Originally Posted by Chris Ramsey View Post

        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!
        No problem Chris.

        Not a genius but I've been working with css so long I could do it in my sleep

        When I first found out about resetting container bounds with relative/absolute positioning, it was definitely an aha moment. Not to mention it saved me tons of extra lines of css trying to work around to get the effect this makes dead simple.
        Signature
        {{ DiscussionBoard.errors[1915600].message }}

Trending Topics