Question

我有一个页面，其中间包含一个单字段用户输入表单+ 15个随机定位的div，用于从数据库中提取内容。我设法让他们不要相互重叠，但不能为中间的表格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-indices设置为高于导致问题的搜索框。 serach盒子上的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。因此，通过将单词container设置为0并将所有单词保留在其中;以及1的搜索容器，并再次保留所有相关元素，我们可以保证单词容器中的元素不会与搜索容器中的元素重叠。

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

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

最后，将需要位置的主容器设置为static以外的其他值（如果没有设置，则为默认的css位置值），以便内部元素的定位起作用。< / p>

div重叠每次都不起作用

1 个答案: