How to use position relative and fixed together

Discussion in 'HTML' started by fulio pen, Nov 4, 2012.

  1. fulio pen

    fulio pen Guest

    Hello,

    I used the following css code as follows:


    #return {position:relative; left:650px; bottom:80px; position:fixed; }

    But it doesn't work. I like to use the position:relative and position:fixed together. Is it possible? If yes, what to do?

    Thanks for help.

    fulio pen
    fulio pen, Nov 4, 2012
    #1
    1. Advertising

  2. fulio pen

    Gus Richter Guest

    On 11/4/2012 5:11 PM, fulio pen wrote:
    > Hello,
    > I used the following css code as follows:
    > #return {position:relative; left:650px; bottom:80px; position:fixed; }
    > But it doesn't work. I like to use the position:relative and position:fixed together.
    > Is it possible?


    No. In the first instance it is told to be "in the flow" and in the next
    it is told to be "out of the flow".

    > If yes, what to do?


    What you could/should do is to inform us as to what you are trying to
    achieve.

    --
    Gus
    Gus Richter, Nov 5, 2012
    #2
    1. Advertising

  3. 2012-11-05 4:43, Gus Richter wrote:

    > On 11/4/2012 5:11 PM, fulio pen wrote:
    >> Hello,
    >> I used the following css code as follows:
    >> #return {position:relative; left:650px; bottom:80px; position:fixed; }
    >> But it doesn't work. I like to use the position:relative and
    >> position:fixed together.
    >> Is it possible?

    >
    > No. In the first instance it is told to be "in the flow" and in the next
    > it is told to be "out of the flow".


    Well, technically they can be "used together", and this works by the
    specifications, namely so that the value specified later inside the rule
    is the one used, and the first one is ignored. The values do not
    cumulate or combine.

    > What you could/should do is to inform us as to what you are trying to
    > achieve.


    Right.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Nov 5, 2012
    #3
  4. fulio pen

    fulio pen Guest

    On Monday, November 5, 2012 5:29:18 AM UTC-5, Jukka K. Korpela wrote:
    > 2012-11-05 4:43, Gus Richter wrote:
    >
    >
    >
    > > On 11/4/2012 5:11 PM, fulio pen wrote:

    >
    > >> Hello,

    >
    > >> I used the following css code as follows:

    >
    > >> #return {position:relative; left:650px; bottom:80px; position:fixed; }

    >
    > >> But it doesn't work. I like to use the position:relative and

    >
    > >> position:fixed together.

    >
    > >> Is it possible?

    >
    > >

    >
    > > No. In the first instance it is told to be "in the flow" and in the next

    >
    > > it is told to be "out of the flow".

    >
    >
    >
    > Well, technically they can be "used together", and this works by the
    >
    > specifications, namely so that the value specified later inside the rule
    >
    > is the one used, and the first one is ignored. The values do not
    >
    > cumulate or combine.
    >
    >
    >
    > > What you could/should do is to inform us as to what you are trying to

    >
    > > achieve.

    >
    >
    >
    > Right.
    >
    >
    >
    > --
    >
    > Yucca, http://www.cs.tut.fi/~jkorpela/


    Hello,

    I created a container with divs, moved it to the far right and up a bit by position relative left and bottom, and then fixing it with position:relative fixed. it didn't work so far.

    I will demonstrate the page later. Thanks.

    Regards,
    fulio pen
    fulio pen, Nov 5, 2012
    #4
  5. fulio pen

    fulio pen Guest

    On Monday, November 5, 2012 9:14:16 AM UTC-5, fulio pen wrote:
    > On Monday, November 5, 2012 5:29:18 AM UTC-5, Jukka K. Korpela wrote:
    >
    > > 2012-11-05 4:43, Gus Richter wrote:

    >
    > >

    >
    > >

    >
    > >

    >
    > > > On 11/4/2012 5:11 PM, fulio pen wrote:

    >
    > >

    >
    > > >> Hello,

    >
    > >

    >
    > > >> I used the following css code as follows:

    >
    > >

    >
    > > >> #return {position:relative; left:650px; bottom:80px; position:fixed; }

    >
    > >

    >
    > > >> But it doesn't work. I like to use the position:relative and

    >
    > >

    >
    > > >> position:fixed together.

    >
    > >

    >
    > > >> Is it possible?

    >
    > >

    >
    > > >

    >
    > >

    >
    > > > No. In the first instance it is told to be "in the flow" and in the next

    >
    > >

    >
    > > > it is told to be "out of the flow".

    >
    > >

    >
    > >

    >
    > >

    >
    > > Well, technically they can be "used together", and this works by the

    >
    > >

    >
    > > specifications, namely so that the value specified later inside the rule

    >
    > >

    >
    > > is the one used, and the first one is ignored. The values do not

    >
    > >

    >
    > > cumulate or combine.

    >
    > >

    >
    > >

    >
    > >

    >
    > > > What you could/should do is to inform us as to what you are trying to

    >
    > >

    >
    > > > achieve.

    >
    > >

    >
    > >

    >
    > >

    >
    > > Right.

    >
    > >

    >
    > >

    >
    > >

    >
    > > --

    >
    > >

    >
    > > Yucca, http://www.cs.tut.fi/~jkorpela/

    >
    >
    >
    > Hello,
    >
    >
    >
    > I created a container with divs, moved it to the far right and up a bit by position relative left and bottom, and then fixing it with position:relative fixed. it didn't work so far.
    >
    >
    >
    > I will demonstrate the page later. Thanks.
    >
    >
    >
    > Regards,
    >
    > fulio pen


    Hello,

    Please open the following web page. I like to move the container 650px to the right, and 200px up, and fix its position, which means, when the page moves down, the container does not move.

    http://www.pinyinology.com/wheel/wheel2/fixed.html

    thanks for help.

    fulio pen
    fulio pen, Nov 5, 2012
    #5
  6. 2012-11-05 21:02, fulio pen wrote:

    > Please open the following web page. I like to move the container 650px to the right,
    > and 200px up, and fix its position, which means, when the page moves

    down, the container does not move.
    >
    > http://www.pinyinology.com/wheel/wheel2/fixed.html


    Fixed positioning means fixing the position with respect to the
    viewport, see
    http://www.w3.org/TR/CSS21/visuren.html#choose-position

    You cannot fix a position with respect to the elements "natural"
    position, i.e. the position it would have without CSS positioning. Such
    relative positioning happens with position: relative, and that's a
    completely different setup.

    So you can use position: fixed and then set the position with respect to
    the viewport (the viewing area of the browser) using e.g. the left and
    top properties. Putting anything 650px to the right of the viewport left
    edge is risky, though. Many devices don't even support a width large
    enough for that, and many people run a browser in a fairly narrow window.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Nov 5, 2012
    #6
  7. fulio pen

    dorayme Guest

    In article <>,
    fulio pen <> wrote:

    > Please open the following web page. I like to move the container 650px to the
    > right, and 200px up, and fix its position, which means, when the page moves
    > down, the container does not move.
    >
    > http://www.pinyinology.com/wheel/wheel2/fixed.html


    If it moves to the right by that amount, you must know that some
    people will not see it or have to scroll for it. Why even think along
    these inflexible lines?

    It is not plain what your plan is all about. If it is to get the box
    out of the way, and if you are sure users don't narrow their browser
    window extremely to muck things up then margin it from the right of
    the containing block so it always appears (eg. position: fixed; right:
    2em;...). As for vertical positioning, why do you want it to move up?
    what else are you doing?

    --
    dorayme
    dorayme, Nov 5, 2012
    #7
  8. fulio pen

    Gus Richter Guest

    On 11/5/2012 2:02 PM, fulio pen wrote:
    > Please open the following web page. I like to move the container 650px to the right, and 200px up, and fix its position, which means, when the page moves down, the container does not move.
    >
    > http://www.pinyinology.com/wheel/wheel2/fixed.html
    >
    > thanks for help.
    >
    > fulio pen


    Some points to take note of:
    Position Fixed accepts Dimension Properties and Position Properties.
    Top and Left values are offset relative to the top left corner of the
    canvas.
    Bottom and Right values are offset relative to the bottom right corner
    of the canvas.
    Relative, absolute, percentage or negative values may be used.

    Here is an example for your container:

    #container {border:4px solid red;width:150px;padding:5px;
    position:fixed;
    top:100px;left:650px;
    }


    Note that I used 100px in place of 200px since 200px in this example is
    almost the same as its static position on the vertical plane.

    Also note that you cannot move up from a certain point as you wish - all
    is relative to the top left (or bottom right) of the screen.

    --
    Gus
    Gus Richter, Nov 5, 2012
    #8
  9. fulio pen

    fulio pen Guest

    On Monday, November 5, 2012 4:58:51 PM UTC-5, Gus Richter wrote:
    > On 11/5/2012 2:02 PM, fulio pen wrote:
    >
    > > Please open the following web page. I like to move the container 650px to the right, and 200px up, and fix its position, which means, when the page moves down, the container does not move.

    >
    > >

    >
    > > http://www.pinyinology.com/wheel/wheel2/fixed.html

    >
    > >

    >
    > > thanks for help.

    >
    > >

    >
    > > fulio pen

    >
    >
    >
    > Some points to take note of:
    >
    > Position Fixed accepts Dimension Properties and Position Properties.
    >
    > Top and Left values are offset relative to the top left corner of the
    >
    > canvas.
    >
    > Bottom and Right values are offset relative to the bottom right corner
    >
    > of the canvas.
    >
    > Relative, absolute, percentage or negative values may be used.
    >
    >
    >
    > Here is an example for your container:
    >
    >
    >
    > #container {border:4px solid red;width:150px;padding:5px;
    >
    > position:fixed;
    >
    > top:100px;left:650px;
    >
    > }
    >
    >
    >
    >
    >
    > Note that I used 100px in place of 200px since 200px in this example is
    >
    > almost the same as its static position on the vertical plane.
    >
    >
    >
    > Also note that you cannot move up from a certain point as you wish - all
    >
    > is relative to the top left (or bottom right) of the screen.
    >
    >
    >
    > --
    >
    > Gus


    Thanks for help. I used position:fixed; top and right in the following page:

    http://www.pinyinology.com/wheel/wheel2/fixed2.html

    It may be better using left and top.

    fulio pen
    fulio pen, Nov 6, 2012
    #9
  10. fulio pen

    Gus Richter Guest

    On 11/5/2012 10:11 PM, fulio pen wrote:
    > Thanks for help. I used position:fixed; top and right in the following page:
    >
    > http://www.pinyinology.com/wheel/wheel2/fixed2.html
    >
    > It may be better using left and top.


    No, yours is better since it stays on the page when you reduce the
    window size.

    --
    Gus
    Gus Richter, Nov 6, 2012
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    645
    Luqman
    Feb 7, 2006
  2. KatB
    Replies:
    8
    Views:
    4,168
  3. Rob Stampfli
    Replies:
    1
    Views:
    427
    Spartanicus
    May 17, 2006
  4. Knut Krueger
    Replies:
    2
    Views:
    429
    Knut Krueger
    May 21, 2007
  5. Nikolai Prokoschenko

    Mouse position in both fixed and relative positioning

    Nikolai Prokoschenko, May 17, 2011, in forum: Javascript
    Replies:
    2
    Views:
    1,038
    darwinist
    May 18, 2011
Loading...

Share This Page