                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /初識HTML(5)+CSS(3)-升級版

絕對定位和相對定位

12-7的例子，當我設置成這樣時

#div1{

? ? width:200px;

? ? height:200px;

border:2px red solid;

position:absolute;

}

</style>

</head>

<body>

<span>偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置</span>

為什么顯示的是這個樣子？

而設置成相對定位時怎么會變成這個樣子 ?

不太理解

Levier007

2017-05-04

源自：初識HTML(5)+CSS(3)-升級版 13-7

關注問題我要回答

1477

操作

收起

6 回答

松強
2017-05-04

小伙子，你還沒理解absolute和relative的意思，可以給你看看我的筆記：望采納

4 回復有任何疑惑可以回復我~

收起回答

Levier007 提問者

嗯嗯問題其實我沒描述清楚但現在懂了還是謝謝你的幫助感謝

2017-05-04 回復有任何疑惑可以回復我~

Annari

果然還是要看看大家的評論才懂

2017-10-15 回復有任何疑惑可以回復我~

慕粉2320129565
2017-05-04

親，你參數沒設置。

0 回復有任何疑惑可以回復我~

收起回答

Levier007 提問者

嗯嗯問題其實我沒描述清楚但現在懂了還是謝謝你的幫助感謝

2017-05-04 回復有任何疑惑可以回復我~

慕粉2320129565
2017-05-04

你的position設置成了absolute，應該改成relative，并且下面應該設置相對于上面和左邊的相對位置參數。

0 回復有任何疑惑可以回復我~

收起回答

qq_唯聽是從_0
2017-05-04

你的代碼只給了絕對定位，沒給偏移多少啊

0 回復有任何疑惑可以回復我~

收起回答

qq_爾瑞海_0
2017-05-04

設置成absolute時，相當于div塊是浮于整個頁面之上，就象word中的圖像浮于文字之上是一樣的效果，設置了top、left等值，就浮于設定的位置處，不給top、left值，就相當于浮于原點處，就是你給出的這個樣子。

0 回復有任何疑惑可以回復我~

收起回答

Levier007 提問者

問題我還沒描述清楚不好意思我設置成相對定位時那一段文字就在紅色方框的下邊了而絕對定位時文字和方框重合了是這里有點不理解

2017-05-04 回復有任何疑惑可以回復我~

qq_爾瑞海_0 回復 Levier007 提問者

設置成相對位置時，各個元素順序排列，就相當于word文檔中設置圖片時是插入文字中，只是設定了偏移值是相對于原來位置來移動，html默認就是相對位置，設置成絕對位置，就將這一個塊單拉出來，浮動于整個文檔之上，設定的偏移值是相對于瀏覽器，不給值就是本塊相對于瀏覽器不偏移，這就相當于word文檔中設置圖片格式是浮于文字上方的效果。這樣解釋清楚否？你可以設置試試。

2017-05-04 回復有任何疑惑可以回復我~

Levier007 提問者回復 qq_爾瑞海_0

簡單來說就是絕對定位方框是浮于文字之上的并不占用文檔空間所以文字會直接在第一行顯示但當設置成相對定位時方框是占用了空間的此時的文字就只能另起一行這種就顯示在方框的下邊了對嗎這么理解？

2017-05-04 回復有任何疑惑可以回復我~