关于banner盖住menu-box的问题

menu-box和banner都在main里面但是menu-box是绝对定位 banner是相对定位相对定位不会产生浮动它的本体还会占据原来的地方存在文档流但是menu-box却是绝对定位按道理来说肯定也会脱离文档流浮动起来呀为啥这里会这样呢

心字香烧 2019-07-04

源自：项目：JavaScript轮播图 4-1 导航菜单的结构

收起

5回答

好帮手慕阿满 2019-07-05 19:01:59

同学你好，第一个是menu-box，使用决定定位，第二个元素是banner，使用相对定位的，如：

祝：学习愉快~

收起回答

好帮手慕阿满 2019-07-05 17:40:52

同学你好，这里是使用定位，和浮动没有关系，使用定位可以将元素定位到想要的位置，可以覆盖之前的元素。祝：学习愉快~

收起回答

提问者心字香烧 #1

既然这样那第一个元素绝对定位第二个元素不定位它能占据原来的位置吗？不能的呀我试过了

2019-07-05 17:43:38

好帮手慕阿满 2019-07-05 14:30:11

同学你好，同学在纠结什么问题呢？现在是menu-box在前，banner在后。在后边的banner覆盖了在前边的menu-box。给menu-box设置了z-index使其在banner上显示。同学在纠结哪里呢？

祝：学习愉快~

收起回答

提问者心字香烧 #1

你想啊：第一个元素肯定是产生浮动了呀不然第二个元素怎么可能占据第一个元素的位置第二个元素相对定位显示在了第一个浮动的元素上面我这样理解的

2019-07-05 14:58:13
提问者心字香烧 #2

其实我感觉我自己的理解是没有问题的 menu box如果不浮动 banner就得到menu box的底下来了所以menubox绝对定位产生浮动脱离一下文档流给底下的banner留位置然后banner再相对定位一下显示在了浮动的menubox上面了（此时还没有添加z-index）没加z-index的情况下我是这么理解的我觉得我这样理解是对的

2019-07-05 15:11:54

好帮手慕柯南 2019-07-04 18:51:56

同学你好！同学的理解有点小问题：

绝对定位与浮动有一个相同的特性，会使元素脱离文档流，但是绝对定位与浮动不同呢
无论是绝对定位还是相对定位，它的优先级首先是由在文本中的顺序决定的，在文本后面的优先级会高于在文本前面的。使用z-index可以改变它的层级。而且z-index主要就是与定位相结合使用的。所以banner会覆盖前面的menu-box

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

收起回答

提问者心字香烧 #1

老师你看我这样理解对不对啊：1.首先 menu-box元素在前面使用了绝对定位脱离了文档流并且浮动了 2.banner元素在后面因为前面menu-box脱离了文档流并且浮动了所以banner元素占据了menu-box原来的位置顶了上去但是此时的banner元素采用了相对定位虽然banner的本体顶了上去但是banner的显示却显示到了浮动的menu-box上面了所以从上到下的位置就是 banner的显示层>浮动的menu-box层>banner未脱离文档流的本体层不知道我这样理解可不可以

2019-07-04 18:54:05
好帮手慕柯南回复提问者心字香烧 #2

同学这么理解有点问题呢，与浮动没有关系呢。同学可以看一下老师的说明呢。祝学习愉快~

2019-07-04 19:03:53
提问者心字香烧回复好帮手慕柯南 #3

老师你看第一个元素设置了绝对定位此时第二个元素放上来了肯定会占据第一个元素原来的位置啊不然它放哪儿呢第一个元素已经脱离文档里了呀第二个元素可没有脱离文档流

2019-07-04 19:16:56

提问者心字香烧 2019-07-04 18:41:40

老师你看我这样理解对不对啊：1.首先 menu-box元素在前面使用了绝对定位脱离了文档流并且浮动了

2.banner元素在后面因为前面menu-box脱离了文档流并且浮动了所以banner元素占据了menu-box原来的位置顶了上去但是此时的banner元素采用了相对定位虽然banner的本体顶了上去但是banner的显示却显示到了浮动的menu-box上面了所以从上到下的位置就是 banner的显示层>浮动的menu-box层>banner未脱离文档流的本体层不知道我这样理解可不可以

收起回答