Перекрытие div не работает каждый раз
У меня есть одна страница, которая содержит форму ввода пользователя с одним полем в середине + 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>Любая помощь приветствуется. Заранее спасибо.
1 ответ
Я не вижу проблемы в приведенном рабочем примере (то есть слова не пересекаются с поиском меня, но вы говорите, что проблема прерывистая), но я предполагаю, что что-то с javascript устанавливает z-индексы выше, чем окно поиска, которое вызывает проблему. Z-индекс на поле поиска - всего 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-индекс, чем исходный родительский элемент. Итак, установив контейнер слов в 0 и сохраняя все слова в нем; и поисковый контейнер для 1 и снова сохраняя все связанные элементы внутри этого, мы можем гарантировать, что никакие элементы из контейнера слов не будут перекрывать элементы в контейнере поиска.
CSS Tricks объясняет это лучше меня, я уверен!
Вот JSFiddle, который демонстрирует. Там есть еще несколько стилей, чтобы добавлять цвета и позиционировать объекты симулированным образом, но мы можем видеть, что все слова с z-index, установленным в 10, стоят позади всего в контейнере поиска, даже если z-index установите 1 для всех этих элементов.
Наконец, главный контейнер, в котором они оба находятся в нужном положении, должен быть установлен на что-то другое, чем static (значение позиции css по умолчанию, если ничего не установлено), чтобы позиционирование внутренних элементов работало.