网站建设中非替换元素和替换元素的定位规则大不相同。这是因为替换元素有固有的高度和宽度，因此其大小不会改变，除非创作人员有意显式地修改。因此，在替换元素定位中没有“恰当收放”行为的概念。

确定替换元素位置和大小时，所涉及的行为用以下规则描述最为容易，这组规则按顺序分别：

如果width设置为auto，width的实际使用值由元素内容的固有宽度决定。因此，如果一个图像的宽度是50像素，使用值则计算为50px。如果网站建设显式声明了width （也就是说，设置为100px或50%），则width设置为该值。

在从左向右读的语言中，如果left值为auto，要把auto替换为静态位置。在从右向左读的语言中，则把right的auto值替换为静态位置。

如果left或right仍为auto（也就是说，未在上一步中被替换），则将margin-left 或margin-right的auto值替换为0。

如果此时margin-left和margin-right都还定义为auto，则把它们设置为相等的值，从而将元素在其包含块中居中。

在此之后，如果只剰下一个auto值，则将其修改为等于等式的余下部分（使等式满足）。

这与非替换元素绝对定位时的基本行为相同（只要假设非替换元素有一个显式的宽度）。因此，下面两个元素会有相同的宽度和位置，假设图像的固有宽度是100像素（见图10-50）:

<div style="width: 200px; height: 50px; border: 1px dotted gray;">

<img src="frown.gif" alt="a frowny face" style='position: absolute; Cop: 0; left: 50px; margin: 0;">

<div style="position: absolute; top: 0; left: 50px; width: lOOpx; height: 100px; margin: 0;"> it's a div!

</div>

</div>

图10-50：绝对定位一个替换元素

与非替换元素一样，如果值过度受限，网页设计员就会忽略right的值（对于从左向右读的语言），而在从右向左读的语言中会忽略left的值。因此，在以下例子中，right的声明值会被计算值50px覆盖：

<div style="position: relative; width: 300px;">

<img src="frown.gif" alt="a frowny face"

Style="position: absolute; top: 0; left: 50px; right: 125px; width: 200px; margin: 0;">

类似地，沿垂直轴的布局受以下一坦规则控制：

如果网页设计height设置为auto, height的计算值由元素内容的固有高度确定。因此，对于一个50像素高的图像，其height计算为50px。如果height显式声明为某个值（如lOOpx或50W，则height会设置为该值。

如果top的值为auto，将其替换为替换元素的静态位置。

如果bottom的值为auto，将margin-top或margin-bottom的所有auto值替换为0。

如果此时margin-top和margin-bottom都还定义为auto，将其设置为相等的值，从而使元素在其包含块中居中。

在此之后，如果网页设计仅剩下一个auto值，则将其修改为等于等式中的余下部分（使等式满足）。

与非替换元素一样，如果值过度受限，网页设计员会忽略bottom。

因此，以下标记会得到如图10-51所示的结果：

<div style="position: relative; height: 200px; width: 200px; border: 1px solid;"><img src="one.gi£' alt="one" widths"25" heights"25" style="position: absolute; top: 0; left: 0.; margin: 0;">

<img src="two.gif" alt=.two" width="25' style="position: absolute; top: 0; left: 60px; margin: 10px 0; bottom: 4377px;">

<img src="three.gif alt=" three- heights"25" style="posxtion: absolute; left: 0; width: lOOpx; margin: 10px; bottom: 0;">

<img src="four.gif_ alc=" four" style="position: absolute; top: 0; height: lOOpx; right: 0; width: 50px;">

<img src="five.gif" alt="five" style:"position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;">