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

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

    网页设计中的绝对定位

    • 2019-03-11 16:09:13
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.com

    由于上一节中的大多数例子和例图描述的都是绝对定位,网页设计人员应该对绝对定位如何工作有了一定的了解。接下来主要介绍使用绝对定位时的具体细节。

    元素绝对定位时,会从文档流中完全删除。然后相对于其包含块定位,其边界根据偏移属性(top、left等)放置,定位元素不会流入其他元素的内容,反之亦然。这说明,绝对定位元素可能覆盖其他元素,或者被其他元素覆盖(本章后面会看到,你可以影响这种覆盖顺序)。

    绝对定位元素的包含块是最近的position值不为static的祖先元素。创作人员通常会选择一个元素作为绝对定位元素的包含块,将其position指定为relative而且没有偏移:

    p.contain {position; relative;}

    考虑图10-38中的例子,这是由以下样式得到的结果:

    p {margin: 2em;}

    p.contain {position: relative;}/* establish a containing block*/ b {position: absolute; top: auto; right: 0; bottom: 0; left: auto; width: 8em; height: 5em; border: 1px solid gray;}

    <body>

    <p>

    This paragraph does <era>not</em> establish a containing block for any of its

    descendant elements that are absolutely positioned. Therefore, the absolutely

    positioned <b>boldface </b> element it contains will be positioned with respect to the initial containing block.  .

    <p Class="contain">

    Thanks to 'position; relative', this paragraph establishes a containing block for any of its descendant elements that are absolutely positioned. Since there is such an element——<em>that is to say,<b>a boldfaced element

    that is absolutely positioned,</b> placed with respect to its containing block (the paragraph)</em>, it will appear within the element box generated by the paragraph.

    </p>

    </body>

    两个段落中的b元素都是绝对定位。其区别在于各元素所用的包含块。第一段中的b元素相对于初始包含块定位,因为它的所有祖先元素的position都是static。不过,第二个段落设置为position: relative,所以它为其后代元素建立了一个包含块。

    你可能已经注意到,在第二段中,定位元素覆盖了段落中的部分文本内容。这在网站建设中是没有办法避免的,因为无法将b元素定位到段落之外(比如right或其他某个偏移属性使用负值),也无法为段落指定一个足够宽的内边距来容纳定位元素。另外,由于b元素有一个透明背景,所以会透过这个定位元素看到段落的文本。要避免这种情况,唯一的办法就是为定位元素设置一个背景,或者将其从段落中完全去除。

    有时,网页设计人员可能想确保body元素为其所有后代建立一个包含块,而不是让用户代理选择初始包含块。这很简单,只需如下声明:

    body {position: relative,}

    在这样一个文档中,可以随便放置绝对定位段落(如下),这会得到如图10-39所示的结果:

    <P style="position: absolute; top: 0; rights 25%; left: 25%; bottom: auto; width: 50%; height: auco; background: silver;">...</p>

    图10-39:定位一个元素,其包含块为根元素

    现在段落定位在文档的最前面,其宽度是文档宽度的一半,并会覆盖前面的几个元素。

    要强调重要的一点:元素绝对定位时,还会为其后代元素建立一个包含块。例如,可以将一个元素绝对定位,然后将它的一个子元素绝对定位,如图10-40所示,这是使用以下样式和基本标记生成的:

    div {position: relative; width: 100%; height: l0em;

    border: 1px solid; background:#EEE;}

    div.a {position: absolute; top: 0; right: 0; width: 15em; height: 100%; margin-left: auto; background:#CCC;}

    div.b {position: absolute; bottom: 0; left: 0; width: l0em; height: 50%; margin-top: auto; background:#AAA;}

    <div>

    <div class="a">absolutely positioned element A

    <div cl-ass="b'>abso:Lutely positioned element B</div>

    </div>

    containing block

    图10-40:绝对定位元素建立包含块

    网页设计人员要记住,如果文档可滚动,定位元素会随着它滚动。只要绝对定位元素不是固定定位元素的后代,情况都是如此。其原因是元素最终会相对于正常流的某一部分定位。例如,如果将一个表绝对定位,其包含块是初始包含块,那么这个表就会随文档滚动,因为初始包含块是正常流的一部分。类似地,即使建立一个嵌套4层的绝对定位元素,“最外层”元素总是会相对于初始包含块定位?因此,它会随着初始包含块滚动,而其所有后代元素也会随之滚动。

    注意:如果设计人员想将元素定位为相对于视窗放置,而不随文档的其余部分滚动,那么请继续看下去。后面关于固定定位的一节将讲解怎么做。

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

    当前URL:http://www.0737dz.com/news/wzzz/absolute-positioning.html

    上一篇:网页设计中的元素可见性

    下一篇:网页设计中的包含块和绝对定位元素

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