个人中心
gpt4 book ai didi

html - div重叠每次都不起作用

转载 作者：行者123 更新时间：2023-11-28 03:08:59 25 4
gpt4 key购买 nike

我有一个页面，中间包含一个单字段用户输入表单 + 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>

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

最佳答案

我在给出的工作示例中没有看到问题(即这些词没有与我的搜索重叠，但你确实说问题是间歇性的)，但我假设 javascript 正在设置z-index 高于导致问题的搜索框。搜索框上的 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。

最后，包含它们的主容器需要将 position 设置为 static 以外的值(如果未设置，则为默认的 css position 值)，以便内部元素的定位工作。

关于html - div重叠每次都不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31366412/

25 4 0
文章推荐： javascript - 对象数组不按属性排序
文章推荐： html - 有没有办法像图像大小css一样设置空的div大小
文章推荐： c++ - QtGridLayout 表现得像 QVBoxLayout？
文章推荐： javascript - 未捕获( promise 中): TypeError: data. 数据不可迭代
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com