• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    网页设计中的相对定位

    • 2019-03-25 17:16:13
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.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.0737dz.com/news/wzzz/relative-positioning.html

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

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

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图