CSS and Absolute vs. relative position

26/04/2008, 02h04

1. I'm finding that when I use absolute position to place a table on a page,
it changes the user's ability to highlight the text in that table or cell.
(i.e. what happens is that they go to highlight and other parts of the page end
up being selected, not what the users is trying to highlight)

When I switch the page to using relative positioning for tables, this problem
goes away.

Is there a reason this is happening?

2. Absolute positioning obviously gives me more precision over where elements
are placed. I don't seem to understand how relative positioning works. What
is it *relative* to? Does someone know a good, simple, tutorial that will
me understand CSS, positioning, etc.?

3. I have a page that I'd like to have one object in the top left corner and
one in the top right corner. The page is fluid. How do I get each object into
their respective corners?

Thank you.

michael munson
tgwarrior@forge-forward.org

28/04/2008, 13h54

This may you understand positioning a bit -

There are 4 different types of positioning:
Absolute
Relative
Fixed
Static

Here is a brief explanation of each kind of positioning (with regard to
placement of elements on the page only)....

Position:absolute (or A/P elements)
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the page so that
it can no longer influence the size or position of any other page element
(except for those contained within it, of course).

2. The absolutely positioned element takes its position from the position of
its closest PARENT *positioned* element - in the absence of any explicitly
positioned parent, this will default to the <body> tag, which is always
positioned
at 0,0 in the browser viewport.

This means that it doesn't matter where in the HTML code the layer's code
appears (between <body> and </body>), its location on the screen will not
change (this assumes that you have not positioned the A/P element within
a table or another A/P element, of course). Furthermore, the space in
which
this element would have appeared were it not positioned is not preserved
on the screen. In other words, absolutely positioned elements don't take
up any space on the page. In fact, they FLOAT over the page.

Position:relative (or R/P elements)
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from the flow of the code on the page, so it will use the
spot
where it would have appeared based on its position in the code as its
zero point reference. If you then supply top, right, bottom, or left
positions
to the style for this element, those values will be used as offsets from
its
zero point.

This means that it DOES matter where in the code the relatively positioned
element appears (, as it will be positioned in that location (factoring in
the offsets) on the screen (this is true for any placement in the code).
Furthermore, the space where this element would have appeared is
preserved in the display, and can therefore affect the placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.

Position:static
-------------------
As with relative position, static positions also "go with the flow". An
element with a static position cannot have values for offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.

Position:fixed
------------------
A page element with this style will not scroll as the page content scrolls.
Support for this in elements other than page backgrounds is quirky

There are several other things you need to know:

1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of other
elements
on the page. For example, a 'layer' placed over a hyperlink will mask that
hyperlink.

You can see a good example of the essential difference between absolute and
relative positioning here -

http://www.great-web-sights.com/g_layersdemo.asp

You can see a good demonstration of why using layers for a page layout tool
is dangerous here -

http://www.great-web-sights.com/g_layer-overlap.asp

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"tgwarrior31" <webforumsuser@macromedia.com> wrote in message
news:futv3h$gil$1@forums.macromedia.com...
> 1. I'm finding that when I use absolute position to place a table on a
> page,
> it changes the user's ability to highlight the text in that table or cell.
> (i.e. what happens is that they go to highlight and other parts of the
> page end
> up being selected, not what the users is trying to highlight)
>
> When I switch the page to using relative positioning for tables, this
> problem
> goes away.
>
> Is there a reason this is happening?
>
>
> 2. Absolute positioning obviously gives me more precision over where
> elements
> are placed. I don't seem to understand how relative positioning works.
> What
> is it *relative* to? Does someone know a good, simple, tutorial that
> will
> me understand CSS, positioning, etc.?
>
>
> 3. I have a page that I'd like to have one object in the top left corner
> and
> one in the top right corner. The page is fluid. How do I get each object
> into
> their respective corners?
>
> Thank you.
>
>
> michael munson
> tgwarrior@forge-forward.org
>

29/04/2008, 04h28

Thanks for your explanation. I think i already understood the basics of what
you wrote, however....

Here are two examples -- one of relative positioning (
http://www.forge-forward.org/HIV/ ) and one of absolute positioning (
http://www.forge-forward.org/transvi...pitytshirt.php ).

The one with absolute positioning doesn't allow end users to cut and paste
text.

I also realized that in BOTH cases, the object positioned is a table rather
than just a block of code that is formatted with CSS.

Does it matter that a TABLE is being positioned vs. anything else?

(I wish I could better articulate what the issue is.)

Thanks for your .

michael munson
tgwarrior@forge-forward.org

29/04/2008, 20h23

Cut and paste text? Where? Why?

> Does it matter that a TABLE is being positioned vs. anything else?

No. Positioning is positioning whether it's a <p> or a <table> or a <div>.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"tgwarrior" <webforumsuser@macromedia.com> wrote in message
news:fv64l9$5kt$1@forums.macromedia.com...
> Thanks for your explanation. I think i already understood the basics of
> what
> you wrote, however....
>
> Here are two examples -- one of relative positioning (
> http://www.forge-forward.org/HIV/ ) and one of absolute positioning (
> http://www.forge-forward.org/transvi...pitytshirt.php ).
>
> The one with absolute positioning doesn't allow end users to cut and paste
> text.
>
> I also realized that in BOTH cases, the object positioned is a table
> rather
> than just a block of code that is formatted with CSS.
>
> Does it matter that a TABLE is being positioned vs. anything else?
>
> (I wish I could better articulate what the issue is.)
>
> Thanks for your .
>
> michael munson
> tgwarrior@forge-forward.org
>

26/04/2008, 02h04	#1
tgwarrior31 Messages: n/a Hébergeur:	CSS and Absolute vs. relative position 1. I'm finding that when I use absolute position to place a table on a page, it changes the user's ability to highlight the text in that table or cell. (i.e. what happens is that they go to highlight and other parts of the page end up being selected, not what the users is trying to highlight) When I switch the page to using relative positioning for tables, this problem goes away. Is there a reason this is happening? 2. Absolute positioning obviously gives me more precision over where elements are placed. I don't seem to understand how relative positioning works. What is it relative to? Does someone know a good, simple, tutorial that will me understand CSS, positioning, etc.? 3. I have a page that I'd like to have one object in the top left corner and one in the top right corner. The page is fluid. How do I get each object into their respective corners? Thank you. michael munson tgwarrior@forge-forward.org

28/04/2008, 13h54	#2
Murray ACE Messages: n/a Hébergeur:	Re: CSS and Absolute vs. relative position This may you understand positioning a bit - There are 4 different types of positioning: Absolute Relative Fixed Static Here is a brief explanation of each kind of positioning (with regard to placement of elements on the page only).... Position:absolute (or A/P elements) ----------------------- This does several things - 1. It 'removes' the element from the flow of the code on the page so that it can no longer influence the size or position of any other page element (except for those contained within it, of course). 2. The absolutely positioned element takes its position from the position of its closest PARENT positioned element - in the absence of any explicitly positioned parent, this will default to the <body> tag, which is always positioned at 0,0 in the browser viewport. This means that it doesn't matter where in the HTML code the layer's code appears (between <body> and </body>), its location on the screen will not change (this assumes that you have not positioned the A/P element within a table or another A/P element, of course). Furthermore, the space in which this element would have appeared were it not positioned is not preserved on the screen. In other words, absolutely positioned elements don't take up any space on the page. In fact, they FLOAT over the page. Position:relative (or R/P elements) ---------------------- In contrast to absolute positioning, a relatively positioned page element is not removed from the flow of the code on the page, so it will use the spot where it would have appeared based on its position in the code as its zero point reference. If you then supply top, right, bottom, or left positions to the style for this element, those values will be used as offsets from its zero point. This means that it DOES matter where in the code the relatively positioned element appears (, as it will be positioned in that location (factoring in the offsets) on the screen (this is true for any placement in the code). Furthermore, the space where this element would have appeared is preserved in the display, and can therefore affect the placement of succeeding elements. This means that the taller a relatively positioned element is, the more space it forces on the page. Position:static ------------------- As with relative position, static positions also "go with the flow". An element with a static position cannot have values for offsets (top, right, left, bottom) or if it has them, they will be ignored. Unless explicitly positioned, all div elements default to static positioning. Position:fixed ------------------ A page element with this style will not scroll as the page content scrolls. Support for this in elements other than page backgrounds is quirky There are several other things you need to know: 1. ANY page element can be positioned - paragraphs, tables, images, lists, etc. 2. The <div> tag is a BLOCK level tag. This means that if it is not positioned or explicitly styled otherwise, a) it will always begin on a new line on the screen, and b) it will always force content to a new line below it, and c) it will always take up the entire width of its container (i.e., width:100%). 3. The placement of A/P elements can affect the BEHAVIOR of other elements on the page. For example, a 'layer' placed over a hyperlink will mask that hyperlink. You can see a good example of the essential difference between absolute and relative positioning here - http://www.great-web-sights.com/g_layersdemo.asp You can see a good demonstration of why using layers for a page layout tool is dangerous here - http://www.great-web-sights.com/g_layer-overlap.asp -- Murray --- ICQ 71997575 Adobe Community Expert (If you MUST email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "tgwarrior31" <webforumsuser@macromedia.com> wrote in message news:futv3h$gil$1@forums.macromedia.com... > 1. I'm finding that when I use absolute position to place a table on a > page, > it changes the user's ability to highlight the text in that table or cell. > (i.e. what happens is that they go to highlight and other parts of the > page end > up being selected, not what the users is trying to highlight) > > When I switch the page to using relative positioning for tables, this > problem > goes away. > > Is there a reason this is happening? > > > 2. Absolute positioning obviously gives me more precision over where > elements > are placed. I don't seem to understand how relative positioning works. > What > is it relative to? Does someone know a good, simple, tutorial that > will > me understand CSS, positioning, etc.? > > > 3. I have a page that I'd like to have one object in the top left corner > and > one in the top right corner. The page is fluid. How do I get each object > into > their respective corners? > > Thank you. > > > michael munson > tgwarrior@forge-forward.org >

29/04/2008, 04h28	#3
tgwarrior Messages: n/a Hébergeur:	Re: CSS and Absolute vs. relative position Thanks for your explanation. I think i already understood the basics of what you wrote, however.... Here are two examples -- one of relative positioning ( http://www.forge-forward.org/HIV/ ) and one of absolute positioning ( http://www.forge-forward.org/transvi...pitytshirt.php ). The one with absolute positioning doesn't allow end users to cut and paste text. I also realized that in BOTH cases, the object positioned is a table rather than just a block of code that is formatted with CSS. Does it matter that a TABLE is being positioned vs. anything else? (I wish I could better articulate what the issue is.) Thanks for your . michael munson tgwarrior@forge-forward.org

29/04/2008, 20h23	#4
Murray ACE Messages: n/a Hébergeur:	Re: CSS and Absolute vs. relative position Cut and paste text? Where? Why? > Does it matter that a TABLE is being positioned vs. anything else? No. Positioning is positioning whether it's a <p> or a <table> or a <div>. -- Murray --- ICQ 71997575 Adobe Community Expert (If you MUST email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "tgwarrior" <webforumsuser@macromedia.com> wrote in message news:fv64l9$5kt$1@forums.macromedia.com... > Thanks for your explanation. I think i already understood the basics of > what > you wrote, however.... > > Here are two examples -- one of relative positioning ( > http://www.forge-forward.org/HIV/ ) and one of absolute positioning ( > http://www.forge-forward.org/transvi...pitytshirt.php ). > > The one with absolute positioning doesn't allow end users to cut and paste > text. > > I also realized that in BOTH cases, the object positioned is a table > rather > than just a block of code that is formatted with CSS. > > Does it matter that a TABLE is being positioned vs. anything else? > > (I wish I could better articulate what the issue is.) > > Thanks for your . > > michael munson > tgwarrior@forge-forward.org >

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email