Question

我有这个大问题。

我正在制作一个学校项目网站，我需要将一些div相互重叠，起初只需要放置＆＃34; position：absolute＆＃34;在CSS。

然后教授说使用position：absolute会在改变窗口大小时出现问题，所以我不得不删除它，现在所有的div都是一个在另一个之下，有没有办法让它们重叠而不使用位置：绝对的，他告诉我的一件事就是使用Jquery ..但是怎么样？

aniway，抱歉缺少代码，但现在是：

这里是代码：这是各种div的划分

<div id="demo">
        <div id="schermo"></div>
        <div id="titlescreen"></div>
        <div id="porta_destra"></div>
        <div id="porta_sinistra"></div>
        <div id="schermo_vetro"></div>
        <div id="schermo_bordi"></div>
    </div>

这是CSS格式

   #demo {
    width: 800px;
    height:600px;

    padding: 8px;
    margin:0 auto;
}
 #porta_sinistra {
    position: relative;
    width: 350px;
    height: 600px;
    background: url(../img/porta.jpg) no-repeat; background-size: cover;

}
#porta_destra {
    position: relative;
    width: 350px;
    height: 600px;
    background: url(../img/porta.jpg) no-repeat; background-size: cover;

}
#titlescreen{
    position: relative;
    width: 650px;
    height: 500px;
    background: url(../img/titlescreen.jpg) no-repeat;background-size: cover; 
    margin:0 auto;
}
#schermo{
      position: relative;
    width: 800px;
    height: 600px;
    background: url(../img/schermo.png) no-repeat; background-size: cover;background-color: transparent;
    margin:0 auto;

}
#schermo_vetro{
    position: relative;
    width: 800px;
    height: 600px;
    background: url(../img/schermo_vetro.png) no-repeat; background-size: cover; background-color: transparent;
    margin:0 auto;

}
#schermo_bordi{
   position: relative;
    width: 800px;
    height: 600px;
    background: url(../img/schermo_bordi.png) no-repeat; background-size: cover;background-color: transparent;
    margin:0 auto;

}

但基本上它给了我这个结果： div all one below the other

Answer 1

不要改变位置，而是尝试将负边距分配给想要重叠的div。

实施例。（式= “保证金左：-100px;”）

如果您发布代码，则可以更轻松地提供帮助。

Answer 2

如果有一些示例代码来解释您要复制的内容会很好，但让我们看看我们是否能找到合理的解决方案。

我的第一个想法是将div positions保持为relative，然后将第二个div放在第一个div的顶部。

HTML：

<body>

        <div id="boxes">
            <div id="div1"></div>
            <div id="div2"></div>
        </div>

</body>

CSS：

<style>

    #div1 {

        height:200px;
        width:200px;
        background-color:blue;
        box-shadow:10px 10px 5px grey;
        margin:10px;
        position:relative;
    }

    #div2 {

        height:200px;
        width:200px;
        background-color:red;
        box-shadow: 10px 10px 5px grey;
        position:relative;
        bottom:150px;
        left:50px;
        margin:10px;
    }

</style>

所以最终会出现类似Codepen

的内容

我无法直观地看到可能出现在我头顶的窗口相关问题，使用类似bootstrap的内容可以帮助将HTML元素格式化为所有屏幕尺寸，但这不是什么你的要求，我不会进入它。

关于他的jQuery评论，我不知道任何jQuery快捷方式会使elements与一个简单的函数重叠，但您可以尝试使用draggable()功能，以便您可以在任何需要的地方定位div。

$("#div1").draggable();
$("#div2").draggable();

除此之外，没有你的一些代码就没有多少可以说，如果你想尝试一些negative margins，你可以试试，如果其他两个都失败了。

Negative Margin Codepen

希望这至少能给你一些思考的可能性。最好的运气。

替换＆＃34;职位：绝对＆＃34;有更好的替代重叠div

2 个答案: