Question

在我的网站中，shop_description和shop_picture相互重叠，即使这两个div都是position:relative和display:block。他们也没有任何花车。

仅针对上下文，div也位于此容器div shop_bar 中。

我的问题是，为什么他们过度劳累？我不希望它们重叠。

#shop_description { 
    max-width:70%;
    width:auto;
    position:relative;  
    left:0px;
    right:0px;
    margin: 3% auto;
    overflow:hidden;
    display: block;
    border:1px solid red
}

#shop_picture {
    width:100%;
    height:auto;
    margin:0 auto;
    left:0px;
    right:0px;
    top:50px;
    text-align:center;
    position:relative;
    overflow:hidden;
    display:block
    border:1px solid blue;
}

#shop_picture img{
    width:72%;
    height:auto;
    display: inline-block;
    border:1px solid green
}

#shop_bar {
    z-index:20;
    width:0%;
    position:fixed;
    left:0;
    height:100%;
    overflow-x:none;
    overflow-y:none;
    overflow:hidden;
}

问题的屏幕截图。红框是shop_description。蓝框是shop_picture。绿框为shop_picture img：http://imgur.com/Q4yCGth

Answer 1

您正在使用

推送#shop_picture

#shop_picture {
    ...
    top: 50px;
    ...
    position: relative;
    ...

而#shop_description没有那么多相对下推。

因此，除非您在#shop_description上有足够的保证金，或者除非#shop_description在#shop_picture标记内，否则它们将重叠。

Answer 2

使用top不尊重文档的流程。

.div1 {
   position:relative;
   top:10px
}

.div2 {
   position:relative;
   top:0px
}

结果：苹果将重叠橙色

但是margin-top，他们不会重叠。

.div1 {
   position:relative;
   margin-top:10px
}

.div2 {
   position:relative;
   top:0px
}

结果：苹果将以橙色向下推10px并且不会重叠。

相对，块级div重叠

2 个答案: