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

有沒有bottom的區(qū)別

如果沒有加bottom，box4為什么不在box3內？我理解的是，如果不加bottom：0，那么box4應該在box3內的，對于的位置就是默認的左上角，請大神告知我原因。

精慕門4438460

2016-05-08

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

關注問題我要回答

736

操作

收起

3 回答

不可言語的沉默回答被采納 +3 積分
2016-05-08

首先：div4肯定是”應該“在div3內的。

div4沒有在div3里面的原因：div3的寬高是200px，200px；然后div3里面先是有一個<img>，而這個img的寬高，你可以打開url看下，正好就是200*200。這就意味著，img正好把div3占滿了。

這個時候，div4出來了，但是因為div是塊狀元素，它要另起一行，所以它必須在img的下面，img的下面是什么呢？img的下面就div3的底部，所以，div4就只能在div3的底部了。?

如果，你把img的heigth設置為150px，然后再看，你就會發(fā)現(xiàn)div4會出現(xiàn)在div3中img下面的左下方。

最后，如果你設置了相對位置，把div3作為參照，然后設置div4的bottom為0，差不多就是讓div4浮動起來，讓div4在顯示的時候有一種浮動定位效果。

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

收起回答

#1

精慕門4438460 提問者

前面一段話看懂了，最后一段話，還是不是太明白，請請教。在div3 relative的情況下，div4設置為absolute，則顯示效果為問題的圖2，div4設置為relative，則效果為問題的圖1，大神，能幫忙解釋下這種情況可以如何快速的理解么

2016-05-08 回復有任何疑惑可以回復我~

#2

不可言語的沉默回復精慕門4438460 提問者

absolute是絕對定位，參照對象是父塊級元素，之所有有這樣的效果，是因為設置position:absolute的時候，將這個元素從文檔流中抽離出來了，可以想象float的感覺； relative是相對定位，因為相對定位會保持元素的文檔流位置，意思就是你看效果，它位置是變了，但是對于文檔來說，它其實還是在那個位置。所以它的參照對象是文檔流。你可以在div4中設置為relative后，加一個top：100px看效果。然后設置為absolute，再設置top，看看效果。主要是把握定位的時候的參照元素是什么。

2016-05-08 回復有任何疑惑可以回復我~

#3

精慕門4438460 提問者回復不可言語的沉默

是否是這樣一個意思，div4如果是absolute，top 100px，參照物是div3向下100px，如果是relative，top 100px，參照物是原來自己本來的位置向下100px

2016-05-08 回復有任何疑惑可以回復我~