How to use position relative and fixed together

F

fulio pen

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
 
G

Gus Richter

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.
 
J

Jukka K. Korpela

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.
 
F

fulio pen

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







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.







Right.

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
 
F

fulio pen

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
 
J

Jukka K. Korpela

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.

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.
 
D

dorayme

fulio pen said:
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?
 
G

Gus Richter

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.
 
F

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.

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top