放假前上課的最后一天嗎,明天是自習時間。
今天學到了一個比較強大的功能,定位:position
position:relative;相對定位position:absolute;絕對定位定位口訣:子絕父相(子Div用絕對定位,父Div用相對定位,但這是相對的,不是絕對的,視情況而定)絕對定位有四個值:top right bottom left用了相對定位的地方依然占有空間;用了絕對定位的地方不占有空間
Position常用的值一共有5個。
absolute:生成絕對定位的元素,相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative:生成相對定位的元素,相對于其正常位置進行定位。因此,"left:20" 會向元素的 LEFT 位置添加 20 像素。
fixed:生成絕對定位的元素,相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
static:默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
inherit:規定應該從父元素繼承 position 屬性的值。
案例:
<html><head><meta charset="utf-8"><title></title><style>*{padding:0;margin:0;}.father{position: relative;margin-top: 20px;height: 100px;width: 100px;background: red;}.son{position: absolute;height: 40px;width: 40px;background: green;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
在上面的這個案例中可以看出,使用了絕對定位的son div會重疊在father div的上面,father div使用的是相對定位。
新聞熱點
疑難解答