<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          网页设计中的相对定位

          • 2019-03-25 17:16:13
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          网站建设里理解起来最简单的定位机制就是相对定位。采用这种机制时,将通过使用偏移属性移动定位元素。不过,这可能有一些有意思的后果。

          从表面看来,似乎这就足够了。假设希望将一个图像向上向左移动。图10-58显示了以下样式的结果:

          img (position: relative; top:-20px; left:-20px;}

          图10-58:相对定位元素

          这里所做的只是将图像的上边界向上偏移20像素,左边界向左偏移20像素。不过,注意这里的空白,如果该图像未定位,它本该放在这里。之所以会发生这种情况,原因是当元素相对定位时,它会从其正常位置移走,不过,原来所占的空间并不会因此消失。考虑以下样式的结果,如图10-59所示:

          em (position: relative; top; 8em; color:.gray;.}

          图10-59:相对定位元素

          网页设计人员可以看到,这个段落里有一些空白。本来这是em元素的位置,而em元素的新位置正好在这个空白的后面。

          当然,还可以移动一个相对定位元素,让它覆盖其他内容。例如,以下样式和标记的结果如图10-60所示:

          img.slide {position: relative; left: 30px;}

          <p>

          In this paragraph, we will find that there is an image that has been pushed to the right. It will therefore <inig src="star.gif" alt=_A star!* class=_sli<ae-> overlap content nearby, assuming that it is not the last element in its line box.

          </p>

          图10-60:相对定位元素可以覆盖其他内容

          从前几节可以看到,如果相对定位一个元素,它会立即为其所有子元素建立一个新的包含块。这个包含块对应于该元素原本所在的位置。

          相对定位有一个有意思的小问题。如果一个相对定位元素过度受限会发生什么情况呢?例如:

          strong {position: relative; top: 10px; bottom: 20px;}

          这里指定的值要求两种完全不同的行为。如果只考虑top: 10px,则元素应当向下移10像素,但bottom: 20px则要求元素应该向上移20像素。

          原来的网站建设CSS2规范没有说明这种情况下会怎么做,不过CSS2.1指出,如果遇到过度受限的相对定位,一个值会重置为另一个值的相反数。因此,bottom总是等于-top。这意味着前面的例子会处理为就好像做了以下声明:

          strong {position: relative; top: 10px; bottom:-10px;}

          因此,strong元素将向下移10像素。规范还允许不同的书写方向。在相对定位中,right总是等于-left (从左向右读的语言中),而在从右向左读的语言中则恰好相反,left总是等于-right.

          小结

          浮动和定位是网站建设CSS的两个很吸引人的特性,不过,如果使用时不小心,也会让人很迷惑。对元素定位时,元素重叠,叠放顺序、大小和放置等都需要仔细考虑,另外还必须考虑浮动元素与正常流的关系。因此,使用浮动和定位创建布局需要有所顾忌,不过还是利大于弊。

          利用这些特性,很多布局中硗实已经不需要使用表了,不过出于某些原因,Web中还是要使用表,如表示股票行情和运动成绩等,下一章我们将介绍CSS做了哪些改进来处理

            【注释】

            [1] 注1:这里确实把“positioning”错拼成了“Positoning”,不过这只是在英语拼法上有问题,这个页面本身还是提供了不错的信息。

          当前文章标题:网页设计中的相对定位

          当前URL:http://www.1c4w.com/news/wzzz/relative-positioning.html

          上一篇:网页设计中的固定定位

          下一篇:网页设计中的表布局

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图