Jump to content
Search Community

Is the "postion relative" attribute necessary in greensockJS?

WW test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm not sure what you are animating, but in CSS, position:relative (or fixed or absolute) is required for position styles ( top/left/bottom/right ) to have any effect. You can read more about position here.


Maybe if you could explain what kind of animation you are creating, and why you don't want to, or can't use position:relative, we might have a better chance of solving your problem.

  • Like 1
Link to comment
Share on other sites

I use the TweenMax plugin to Tween a DIV, 

and it must use position:relative in CSS or the DIV won't tween.


so, i just wanna finding the answer of the layout of a website might broken or not after add the position:relative attribute ?


I'm a rookie frome AS3 to html.

Sorry for the weird Question ^^"..

Link to comment
Share on other sites

It's hard to say whether changing the position properties of elements will break a layout or not, as it would depend on how the site is already positioned. It should be ok, but you are best off applying the positioning and seeing for yourself.


'Breaking' the layout would depend on something like changing the first positioned ancestor of an element that is already positioned, or positioning an element past the edge of a parent element with overflow:hidden. Also, positioned elements with a z-index create a new stacking context, so maybe watch out for that as well.

Link to comment
Share on other sites

For the record, if you're trying to move an element around and you don't need it to affect other elements in the document flow, you can simply tween "x" and "y" instead of "top" and "left" because "x" and "y" affect the transform property which has no effect on document flow. Think of those as projecting the pixels to a different spot, but the element technically stays where it was originally in the document flow. That way, you don't need to make sure the position property is "relative" or "absolute". Be warned, however, that transforms can be a bit slow in IE8 (not that it's a huge concern since so few people use that browser, but I figured I'd point it out anyway). 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...