用重叠 div 的更好替代方法替换“位置：绝对”答案

【问题标题】：replacing "position:absolute" with better alternative for overlapping divs用重叠 div 的更好替代方法替换“位置：绝对”
【发布时间】：2016-03-24 06:03:02
【问题描述】：

我有这个大问题。

我正在制作一个学校项目网站，我需要放置一些相互重叠的 div，起初只需在 CSS 中放置“位置：绝对”就足够了。

但是教授说使用 position:absolute 会在更改窗口大小时出现问题，所以我不得不删除它，现在所有的 div 都在另一个之下，有没有办法让它们重叠而不使用 position :absolute，他告诉我的一件事是使用 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

【问题讨论】：

标签： jquery html css layout

【解决方案1】：

尝试为要重叠的 div 分配负边距，而不是更改位置。

例如。 (style="margin-left:-100px;")

如果您发布您的代码，它会更容易提供帮助。

【讨论】：

我试过了，但还是不行我为每个 div 加载使用 document.ready()，当它加载时，给它一个位置，但我不知道它是否可能......是吗？

【解决方案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

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

【讨论】：