課程
/前端開發(fā)
/HTML/CSS
/固定層效果
?a,未設(shè)置偏移量:特點:無論是否存在已定位的祖先元素,都保持在元素初始位置。?? 脫離了標(biāo)準(zhǔn)文檔流。
而不是
未設(shè)置偏移量時,都定位在父元素的左上角
2015-08-18
源自:固定層效果 1-3
正在回答
實驗得出結(jié)論: 老師關(guān)于“未設(shè)置偏移量時,absolute和fixed的位置”問題上有錯誤。
這是代碼:
<style type="text/css">
div{width:50%;height:200px;}
.box1{border:1px solid red; background:#F00;}
.box2{border:1px solid green;background: #6F0;}
.box3{border:1px solid blue;background: #00F; height:300px;position: fixed;}
.box4{border:1px solid black;background: #F3F; position: fixed;}
.box5{border:1px solid black;background: black;height:400px;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</body>
這是截圖:
實驗方法:對處于第三、四個文檔流的元素分別讓其position屬性等于absolute和fixed,可以看到,BOX3保持初始位置不變,BOX4、BOX5上移至BOX3的上邊框處與之重合,形成垂直堆疊,且堆疊右上至下依次為:fixed,absolute,普通文本塊。
實驗工具:DW,搜狗瀏覽器
若有哪里不對,歡迎回復(fù)指正,大家共同進步~~~~~~
fixed與absolute的共同點“未設(shè)置偏移量時,都定位在父元素的左上角”是錯誤的,而是定位在原來的位置。你舉例把box1進行absolute定位,box1原來的位置就是父元素的左上角,你怎么能說是absolute定位后定位在父元素的左上角?你把box1不動,把box2進行absolute定位,再看看box2會不會跑到父元素的左上角??
試驗了一下 有三種情況。
box1或box2其中一個設(shè)置absolute或fixed,被設(shè)置的塊會保持在初始位置。
box1和box2同時設(shè)置absolute或同時設(shè)置fixed,兩個塊會定位在左上角。
box1和box2一個設(shè)置absolute,一個設(shè)置fixed,兩個塊會定位在左上角。
杜拉提奇泊3274268
不懂,什么叫保持在元素的初始位置上,求解釋,菜鳥級。謝謝
我也實踐了,老師講的是錯誤的,我覺得應(yīng)該向老師反映一下,這樣很容易誤導(dǎo)初學(xué)者啊。
是這樣的
舉報
運用屬性值就輕松實現(xiàn)網(wǎng)頁固定層效果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-05-05
實驗得出結(jié)論: 老師關(guān)于“未設(shè)置偏移量時,absolute和fixed的位置”問題上有錯誤。
這是代碼:
<style type="text/css">
div{width:50%;height:200px;}
.box1{border:1px solid red; background:#F00;}
.box2{border:1px solid green;background: #6F0;}
.box3{border:1px solid blue;background: #00F; height:300px;position: fixed;}
.box4{border:1px solid black;background: #F3F; position: fixed;}
.box5{border:1px solid black;background: black;height:400px;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</body>
這是截圖:
實驗方法:對處于第三、四個文檔流的元素分別讓其position屬性等于absolute和fixed,可以看到,BOX3保持初始位置不變,BOX4、BOX5上移至BOX3的上邊框處與之重合,形成垂直堆疊,且堆疊右上至下依次為:fixed,absolute,普通文本塊。
實驗工具:DW,搜狗瀏覽器
若有哪里不對,歡迎回復(fù)指正,大家共同進步~~~~~~
2016-03-04
fixed與absolute的共同點“未設(shè)置偏移量時,都定位在父元素的左上角”是錯誤的,而是定位在原來的位置。你舉例把box1進行absolute定位,box1原來的位置就是父元素的左上角,你怎么能說是absolute定位后定位在父元素的左上角?你把box1不動,把box2進行absolute定位,再看看box2會不會跑到父元素的左上角??
2015-10-18
試驗了一下 有三種情況。
box1或box2其中一個設(shè)置absolute或fixed,被設(shè)置的塊會保持在初始位置。
box1和box2同時設(shè)置absolute或同時設(shè)置fixed,兩個塊會定位在左上角。
box1和box2一個設(shè)置absolute,一個設(shè)置fixed,兩個塊會定位在左上角。
2015-10-02
不懂,什么叫保持在元素的初始位置上,求解釋,菜鳥級。謝謝
2015-08-25
我也實踐了,老師講的是錯誤的,我覺得應(yīng)該向老師反映一下,這樣很容易誤導(dǎo)初學(xué)者啊。
2015-08-20
是這樣的