亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

div塊移動之后,為什么span塊沒有移動到現在邊框的下邊位置,div塊不應該占據整個邊框么

div塊移動之后,為什么span塊沒有移動到現在邊框的下邊位置,div塊不應該占據整個邊框么

慕田峪0816849 2016-07-31 16:41:49
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>relative樣式</title><style type="text/css">#div1{? ? width:200px;? ? height:200px;border:2px red solid;? ? position:relative;? ? ?//position:absolute;left:100px;? ? top:50px;? ??? ??}</style></head><body>
查看完整描述

5 回答

已采納
?
ahao430

TA貢獻35條經驗 獲得超41個贊

對比一下不設置position,和relative,absolute的圖。

http://img1.sycdn.imooc.com//579e39310001bcad03510122.jpg

可以看出不設置和設置relative兩張圖文字位置沒有任何變化。因為position:relative不會脫離文檔流。雖然通過設置left和top移動了div,但是文檔流中依然占據最開始的位置,不會影響其他元素。假設你不設置left和top值,那么兩張圖是完全一樣的。

而第三張圖中,可以看出文字跑到最上面了。因為position:absolute會脫離文檔流。只是你移動了div,看起來不在一起。如果不設置top和left的話,就會發現div沒動,但是文字跑上來重疊在一起了。

你把top和left都去掉,再在瀏覽器中查看就會明白了。

順便說一下,css里的注釋不能用//,你看你圖片里的注釋都沒有變灰。只是剛好因為加了//瀏覽器不認識所以沒有執行。

查看完整回答
1 反對 回復 2016-08-01
  • 慕田峪0816849
    慕田峪0816849
    什么是文檔流呀??
  • ahao430
    ahao430
    html元素是從上到下依次加載的,上面的元素占據了空間,下面的元素就會往下擠,這個就是文檔流。
?
blovetu

TA貢獻319條經驗 獲得超234個贊

  1. 設置position,盒子脫離了文本流,另外設置float也會脫離文本流,你可以單獨把這些試一下,下次遇到這種問題就明白了;

  2. 你的position:absolute,沒有注釋成功,css的注釋是/*注釋內容*/, ? ?html的注釋是<!--注釋內容--> ?,? ?js的注釋是//注釋內容 ?,sumblime注釋的快捷鍵是,選中要注釋的文本按ctrl+/

查看完整回答
1 反對 回復 2016-08-01
?
qyy2499760117_葉子

TA貢獻188條經驗 獲得超91個贊

這節課講的是? ? position:relative;的作用,偏移位置保留不懂。

查看完整回答
反對 回復 2016-08-01
?
nickylau82

TA貢獻128條經驗 獲得超67個贊

設置relative你可以想象一下,這個div是個飛機,從停機坪飛起來,飛到別的地方去了。但是。。這個停機坪還是要給他留著的,否則飛不回來了。。。

查看完整回答
反對 回復 2016-08-01
  • 5 回答
  • 0 關注
  • 2754 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號