                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

有没有bottom的区别

如果没有加bottom，box4为什么不在box3内？我理解的是，如果不加bottom：0，那么box4应该在box3内的，对于的位置就是默认的左上角，请大神告知我原因。

精慕门4438460

2016-05-08

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

关注问题我要回答

751

操作

收起

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，然后再看，你就会发现div4会出现在div3中img下面的左下方。

最后，如果你设置了相对位置，把div3作为参照，然后设置div4的bottom为0，差不多就是让div4浮动起来，让div4在显示的时候有一种浮动定位效果。

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

收起回答

精慕门4438460 提问者

前面一段话看懂了，最后一段话，还是不是太明白，请请教。在div3 relative的情况下，div4设置为absolute，则显示效果为问题的图2，div4设置为relative，则效果为问题的图1，大神，能帮忙解释下这种情况可以如何快速的理解么

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

不可言语的沉默回复精慕门4438460 提问者

absolute是绝对定位，参照对象是父块级元素，之所有有这样的效果，是因为设置position:absolute的时候，将这个元素从文档流中抽离出来了，可以想象float的感觉； relative是相对定位，因为相对定位会保持元素的文档流位置，意思就是你看效果，它位置是变了，但是对于文档来说，它其实还是在那个位置。所以它的参照对象是文档流。你可以在div4中设置为relative后，加一个top：100px看效果。然后设置为absolute，再设置top，看看效果。主要是把握定位的时候的参照元素是什么。

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

精慕门4438460 提问者回复不可言语的沉默

是否是这样一个意思，div4如果是absolute，top 100px，参照物是div3向下100px，如果是relative，top 100px，参照物是原来自己本来的位置向下100px

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