Hi all, <br />
<br />
I know this sounds odd but I am trying to understand how to use layers using both the absolute and relative setting. I understand the absolute setting but not the relative. <br />
<br />
If I use LAYERS in a document and set the style to the following: <br />
<br />
<div id="Layer1" style="position:relative; width:374px; height:115px; z-index:1; left: 330px; top: 177px;"> <br />
<br />
What is the layer relative to. <br />
<br />
Does this make sense. <br />
<br />
Regards <br />
<br />
Dereck<!--content-->position:absolute<br />
If you define the position to be absolute it will be calculated from the upper left corner of the page - unless the layer is defined inside another layer, in which case it will be calculated from the upper left corner of the parent layer.<br />
<br />
position:relative<br />
If you define the position to be relative it will be relative to the position of the tag that carries the style.<br />
That is, if you add a relatively positioned layer in the middle of the page, then the position will be calculated from that exact spot in the middle of your page where it was added.<br />
<br />
hope that clarifies it<br />
<br />
jason<!--content-->I bet you are using Dreamweaver? You are confusing the id with what you are actually positioning...the <div>....Just because Dreamweaver automatically assigns an id to each div it creates doesn't mean they are if fact "layers".<br />
<br />
Here is a good article on positioning from brainjar.<br />
<br />
<!-- m --><a class="postlink" href="http://brainjar.com/css/positioning/">http://brainjar.com/css/positioning/</a><!-- m --><br />
<br />
MNS<!--content-->From the CSS2 Specification:<br />
The values of this property have the following meanings:<br />
<br />
static<br />
The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply.<br />
relative<br />
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.<br />
absolute<br />
The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.<br />
fixed<br />
The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example). Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page.<br />
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-positionYou">http://www.w3.org/TR/REC-CSS2/visuren.h ... ositionYou</a><!-- m --> will note that most all browsers get absolute postioining wrong and that MSIE can't figure out fixed.<!--content-->Hi All,<br />
<br />
Many thanks for your replies, They are very informative and can learn a great deal from them.<br />
<br />
Many thanks<br />
<br />
dereck<!--content-->
<br />
I know this sounds odd but I am trying to understand how to use layers using both the absolute and relative setting. I understand the absolute setting but not the relative. <br />
<br />
If I use LAYERS in a document and set the style to the following: <br />
<br />
<div id="Layer1" style="position:relative; width:374px; height:115px; z-index:1; left: 330px; top: 177px;"> <br />
<br />
What is the layer relative to. <br />
<br />
Does this make sense. <br />
<br />
Regards <br />
<br />
Dereck<!--content-->position:absolute<br />
If you define the position to be absolute it will be calculated from the upper left corner of the page - unless the layer is defined inside another layer, in which case it will be calculated from the upper left corner of the parent layer.<br />
<br />
position:relative<br />
If you define the position to be relative it will be relative to the position of the tag that carries the style.<br />
That is, if you add a relatively positioned layer in the middle of the page, then the position will be calculated from that exact spot in the middle of your page where it was added.<br />
<br />
hope that clarifies it<br />
<br />
jason<!--content-->I bet you are using Dreamweaver? You are confusing the id with what you are actually positioning...the <div>....Just because Dreamweaver automatically assigns an id to each div it creates doesn't mean they are if fact "layers".<br />
<br />
Here is a good article on positioning from brainjar.<br />
<br />
<!-- m --><a class="postlink" href="http://brainjar.com/css/positioning/">http://brainjar.com/css/positioning/</a><!-- m --><br />
<br />
MNS<!--content-->From the CSS2 Specification:<br />
The values of this property have the following meanings:<br />
<br />
static<br />
The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply.<br />
relative<br />
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.<br />
absolute<br />
The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.<br />
fixed<br />
The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example). Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page.<br />
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-positionYou">http://www.w3.org/TR/REC-CSS2/visuren.h ... ositionYou</a><!-- m --> will note that most all browsers get absolute postioining wrong and that MSIE can't figure out fixed.<!--content-->Hi All,<br />
<br />
Many thanks for your replies, They are very informative and can learn a great deal from them.<br />
<br />
Many thanks<br />
<br />
dereck<!--content-->