【CSS学习笔记】绝对定位的父类参照物的确定

今天看CSS定位的课程,了解到一个元素要设置绝对定位,需要确定一个父类或者祖先类参照物,默认是根元素html。
这个默认根元素已经明确,但是祖先类元素参照物如何确定呢?

Just Try

首先,给出代码:

html部分

let's begin.

one
two
three
four
five

hello world!

css部分

#one {
    background-color: lime;
    outline: 2px dashed silver;
    width: 50%;
}
#two {
    background-color: yellow;
    outline: 2px dashed gray;
    width: 50%;
    height: 75%;
}
#three {
    background-color: orange;
    outline: 2px dashed blue;
    width: 50%;
    height: 75%;
}
#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
}
#five {
    background-color: lightblue;
    outline: 2px dashed red;
    width: 50%;
    height: 75%;
}

显示如下:
position_absolute_orig

第一步,给标记为four的div设置绝对定位

#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
    position: absolute;
    right: 5%;
    top: 5%;
}

position_absolute_four
小结:可以看到four(后面直接将标记的id名称对应div元素)已经脱离原有的文档流,在他的父类元素three中不占用位置了。而它的参考物似乎就是浏览器视窗本身,也就是html的html元素这个默认的根元素,你看,它离浏览器视窗顶部和右部的距离是不是差不多都是视窗高度的5%,而且它自身的宽度、高度不也是分别为浏览器视窗的宽高的对应50%和75%么。

第二步,给one添加position: relative;属性声明

position_absolute_one_relative
小结:这次four被限制到one的边框内了,而且宽高和top、right都自适应到了以one的尺寸为基准大小。所以说这个时候,one成了four绝对定位时的祖先元素参照物。

第三步,在第二步的基础上给two添加position: relative;属性声明

position_absolute_one+two_relative
小结:唉,这次four却被two“擒获”了唉,怎么回事?没错,four做绝对定位的祖先参照物,是设置了相对定位且离four最近的那个祖先类元素。跟four最有“血缘关系”,four就会被这个最近的祖先类元素“捕获”。搂到怀里唉,掩面&羞涩。

第四步,测试一下第三步的结论,再给three添加position: relative;属性声明

position_absolute_one+two+three_relative
小结:瞧!是不是?three是four的直接父元素,在one和two都已经设置position: relative;属性声明的前提下,three还是把four给捕获了。

但是!前面几部都是常规套路,如果“不走寻常路”(广告位招租)呢?

第五步,在第四步的基础上,将four的css规则中right的属性值改为负值呢?会有什么效果?

position_absolute_four_negative_right
此时,four已经“一只脚跨出”了three的“势力范围”。
css代码如下

#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
    position: absolute;
    right: -25%;
    top: 5%;
}

小结:一个元素A要设置绝对定位,离它最近的、设置了相对定位的祖先类元素B,就会“捕获”它。但是最终,作为后代元素的A也只是以B为参照物,也就是从B的位置“出发”,至于能去到哪里,则是由top/right/bottom/left属性来决定了。


看完以后学到了啥

哦,似乎只是知道了一个元素要设置绝对定位必须首先确定离它最近的、设置了相对定位的祖先元素作为参照物,然后就可以“背上行囊来一次说走就走的旅行了”(扇脸),应该是可以进行相对于参照物的位移了。

唠叨

至于为何要用前后的两个p元素和five,他们也都是作为我们实验的对照组啊。这里只用了对W3C标准支持得好的chrome内核的,360极速进行测试,其他浏览器下是什么测试情况有待考察。
此文本是,个人学习实践结果,作为学习笔记加深印象。其他初学者也许亦有些微帮助。
至此。


软件与环境

  1. Windows 7 ultimate 64bit;

  2. sublime text 3 + liveStyle;

  3. 360 chrome(内核版本45.0.2454.101),应该不是不很旧吧。

你可能感兴趣的:(css,绝对定位,position)