问答详情
源自:13-6 万事无绝对 -层模型之绝对定位

最接近的一个具有定位属性的父包含块

最接近的一个具有定位属性的父包含块;其中的定位属性和父包含块怎么理解?

提问者:SayHiTo 2016-02-21 15:47

个回答

  • Swibinchter
    2016-03-30 21:49:53

    一、所谓定位属性:

    CSS的语法是“元素:{属性:值}”

    具有定位属性即该元素使用了position属性,其实此属性有四个值:

    1. static静态定位——即页面流中元素默认的位置

    2. absolute绝对定位

    3. relative相对定位

    4. fixed固定定位

    有图为证,w3school的网站表述如下图:

    http://img.mukewang.com/56fbd5240001959908250407.jpg

    貌似扯多了。


    二、父包含块

    此处的父包含块貌似也可以称作父元素,到底是下面哪一种意思呢?

    1. 单纯指元素的上一层元素,姑且称之为爸爸元素

    2. 包含元素的所有元素(爸爸元素、爷元素、太爷元素)

    做了如下实验:

    http://img.mukewang.com/56fbd6050001b7ef08700603.jpg

    上图中div3(小方框)的爸爸元素是不含定位属性的div2(中方框),爷爷元素是含定位属性的div1(大方框)。

    如果父包含块是单指爸爸元素,那么div3(小方框)应该相对于body(页面)定位,上边界应与div1(大方框平齐)。

    然而并没有,div3(小方框)最终以爷爷元素为准进行绝对定位。

    最终判定父包含块指包含该元素的所有元素,而实际上body元素从某种意义上讲是所有元素(不考虑<html><head>)的父元素,当所有元素都没有定位属性时只能以最外层的body为准进行定位了。


    有点啰嗦,不知你是否理解。

  • 逆光_0001
    2016-03-09 11:17:07

    明白了

  • 逆光_0001
    2016-03-09 10:38:05

    什么是具有定位属性的父包含块?

  • 逆光_0001
    2016-03-09 10:34:51

    我也是这个问题,

  • 邻家慕公子
    2016-02-21 16:19:52

    1、参照定位的元素必须是相对定位元素的前辈元素:

    <div id="box1"><!--参照定位的元素-->
       <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
    </div>

    从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。

    :使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位