div 重叠并非每次都有效

Question

我有一个页面，中间包含一个单字段用户输入表单 + 15 个随机放置的 divs，它们从数据库中提取内容。我已经设法让它们不相互重叠，但不能为中间的形式 div 做到这一点。所以我玩弄了 z-index 让他们躲在它后面，如果他们碰巧重叠。

我注意到他们并不总是落后于它。有时它们确实隐藏在输入字段后面，而其他时候它们出现在输入字段前面。

这是我目前的代码：

在 HTML 代码中，我用硬编码文本替换了动态数据 php 代码，只是为了展示功能。

$(window).load(function(){
var maxSearchIterations = 15;
var min_x = 50;
var max_x = 900;
var min_y = 0;
var max_y = 700;
var filled_areas = [];

function calc_overlap(a1) {
    var overlap = 0;
    for (i = 0; i < filled_areas.length; i++) {

        var a2 = filled_areas[i];

        // no intersection cases
        if (a1.x + a1.width < a2.x) {
            continue;
        }
        if (a2.x + a2.width < a1.x) {
            continue;
        }
        if (a1.y + a1.height < a2.y) {
            continue;
        }
        if (a2.y + a2.height < a1.y) {
            continue;
        }

        // If there is an intersection, calculate it.
        var x1 = Math.max(a1.x, a2.x);
        var y1 = Math.max(a1.y, a2.y);
        var x2 = Math.min(a1.x + a1.width, a2.x + a2.width);
        var y2 = Math.min(a1.y + a1.height, a2.y + a2.height);

        var intersection = ((x1 - x2) * (y1 - y2));

        overlap += intersection;

        
    }

    return overlap;
}

function randomize() {

    filled_areas.splice(0, filled_areas.length);

    var index = 0;
    $('.word').each(function() {
        var rand_x = 0;
        var rand_y = 0;
        var i = 0;
        var smallest_overlap = 9007199254740992;
        var best_choice;
        var area;
        for (i = 0; i < maxSearchIterations; i++) {
            rand_x = Math.round(min_x + ((max_x - min_x) * (Math.random() % 1)));
            rand_y = Math.round(min_y + ((max_y - min_y) * (Math.random() % 1)));
            area = {
                x: rand_x,
                y: rand_y,
                width: $(this).width(),
                height: $(this).height()
            };
            var overlap = calc_overlap(area);
            if (overlap < smallest_overlap) {
                smallest_overlap = overlap;
                best_choice = area;
            }
            if (overlap === 0) {
                break;
            }
        }

        filled_areas.push(best_choice);

        $(this).css({
            position: "absolute",
            "z-index": index++
        });
        $(this).animate({
            left: rand_x,
            top: rand_y
        });

    });
    return false;
}

randomize();
});

      #gimme_secrets {
       margin-top: 20%;
  position: relative;
  
    }

    .word {
    position: absolute;
    font-size: 30px;
    background-color: rgba(255,255,255,0.5);
    opacity: 0.3;
    z-index:9999;
}
    .searchbox {
        cursor: auto;
 
        width: 500px;
        height: 30px;
        background-color : #d1d1d1; 
    }
    
#gimme_secrets{
 z-index : 10;
}

html, body {
 margin: 0; 
 height: 100%; 
 overflow: hidden
}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Testing random words.</title>
  
  <script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
  <script language="javascript" type="text/javascript" src="randomizer.js"></script>
  
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
 
 <form action="process.php" method="post" accept-charset="utf-8">
  <div id="gimme_secrets" align="center">
   <div class="secret_label">Gimme gimme gimme?</div>
   <input class="tag searchbox" type="text" name="Secret"/><br/>
   <input class="button" type="submit" value="Share It!" /><br/>
   <div>(This is completely, utterly anonymous!)</div>
  </div>
 </form>

 <!-- divs that will be randomly placed. --> 
  <div id="word0" class="word">This is just a test.1</div>
<div id="word1" class="word">This is just a test.2</div>
<div id="word2" class="word">This is just a test.3</div>
<div id="word3" class="word">This is just a test.4</div>
<div id="word4" class="word">This is just a test.5</div>
<div id="word5" class="word">This is just a test.6</div>
<div id="word6" class="word">This is just a test.7</div>
<div id="word7" class="word">This is just a test.8</div>
<div id="word8" class="word">This is just a test.9</div>
 
 
</body>
</html>

感谢任何帮助。提前谢谢你。

Answer 1

我在给出的工作示例中没有看到问题（即这些词没有与我的搜索重叠，但你确实说问题是间歇性的），但我假设 javascript 将 z-index 设置为高于导致问题的搜索框。 serach box上的z-index只有10，已经很低了

我建议将此作为解决方案：

<div class='master-container'>
    <div class='background-with-moving-text'>
        <!-- all moving text elements -->
    </div>

    <div class='search-container'>
        <!-- all search box elements -->
    </div>
</div>

.master-container {
    position: relative; 
}

.background-with-moving-text {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 0;
}

.search-container {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

由于 z-index 工作方式的性质，子元素上的 z-index 集永远不会覆盖兄弟元素中的元素，其中兄弟元素的 z-index 高于原始父元素。因此，通过将单词容器设置为 0 并将所有单词保留在其中；和搜索容器 1 并再次将所有相关元素保留在其中，我们可以保证单词容器中的元素不会与搜索容器中的元素重叠。

CSS技巧explains this better than me，我确定！

这是 JSFiddle that demonstrates。那里还有一些样式，以模拟方式添加颜色和定位事物，但我们可以看到所有 z-index 设置为 10 的词都在搜索容器中的所有内容后面，即使 z-index 是将所有这些元素设置为 1。

最后，包含它们的主容器需要将位置设置为 static 以外的值（如果设置了 none，则为默认 css 位置值）用于内部元素的定位工作。

div 重叠并非每次都有效

div overlapping doesn't work every time

html

random

z-index

overlapping