html定位参照,HTML连载58-绝对定位的参考点以及注意事项

HTML连载58-绝对定位的参考点以及注意事项

一、绝对定位参考点

1.规律：

(1)默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点。

.box1{

width: 300px;

height: 300px;

background-color: red;

/*position:absolute;*/

/*left:0px;*/

/*bottom:0px;*/

}

.box2{

width: 200px;

height: 200px;

background-color: yellow;

position: absolute;

left:0px;

bottom:0px;

}

(2)如果有一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点。

.box1{

width: 300px;

height: 300px;

background-color: red;

position:absolute;

left:0px;

bottom:0px;

}

.box2{

width: 200px;

height: 200px;

background-color: yellow;

position: absolute;

left:0px;

top:0px;

}

注意点：i.只要是这个绝对定位元素的祖先元素都可以。ii.指的定位流是指绝对定位/相对定位/固定定位，定位流中只有静态定位是不行的。

(3)如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的祖先元素作为参考点。

.......上面的代码不变..........

.box3{

width: 100px;

height: 100px;

background-color: black;

position:absolute;

right:0px;

bottom:0px;

}

.........省略代码.......

二、绝对定位的注意点

(1)如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点的，而不是以整个网页的宽度和高度作为参考点的。

D152_LimeLightOfAbsolutePosition

.box1{

width: 100px;

height: 100px;

background-color: red;

position:absolute;

bottom:0px;

right:0px;

?

}

.box2{

width: 2000px;

height: 100px;

background-color: blue;

position:

}

.box3{

width: 200px;

height: 2000px;

background-color: black;

?

}

(2)一个绝对定位的元素会忽略祖先元素的padding属性。

.box4{

height: 300px;

width: 300px;

background-color: yellow;

padding:50px;

/*position:absolute;*/

/*boder:20px black ;*/

}

.box5{

height: 100px;

width: 100px;

background-color: red;

position:absolute;

left:0px;

top:0px;

}