gpt4 book ai didi

javascript - 混合DIVS的绝对定位、相对定位

转载 作者:行者123 更新时间:2023-11-28 06:12:25 24 4
gpt4 key购买 nike

好了,我要实现如下效果

我有两个应该在彼此之上的 div。我有第三个 div,它应该直接在两个 div 的下面。前两个 div 可以切换可见性,这样当一个可见时,另一个不可见(注意:我删除了 javascript 中的部分切换以简化故障排除)。但无论如何,第三个 div 应该低于其他两个。几个小时前听起来很简单,但我遗漏了一些东西,非常感谢你的帮助。

我创建了一个配对的 HTML 文件,其中只有重要的部分供您查看,并希望告诉我我的误解。

另请注意,我真的不想在 div3 上使用 top 属性,因为我可能想动态更改前两个 div 的大小。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
function clicked(t) {
t.style.visibility = "collapse";
t.style.opacity = 0.0;
}
</script>
</head>
<body>
<div class="container">
<div id="divone" class="one" onclick="clicked(this)"></div>
<div id="divtwo" class="two" onclick="clicked(this)"></div>
<div class="three"></div>
</div>

<style>
div {
height: 100px;
width: 100%;
transition-duration: 2s;
}

div.container {
width: 50%;
top: 0;
margin-left: 0px;
margin-top: 0px;
border-left: 0px;
border-top: 0px;
padding-left: 0px;
padding-top: 0px;
}

div.one {
position: absolute;
background-color: red;
width: 50%;
opacity: 1.0;
z-index:2;
}

div.two {
position: absolute;
background-color: green;
width: 50%;

opacity: 1.0;
z-index: 1;
}

div.three {
position: relative;
top: 0;
width: 60%;
background-color: blue;
}
</style>
</body>

</html>

最佳答案

试试这个:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />

<style>

div {
height: 100px;
width: 100%;
transition-duration: 2s;
}

div.container {
width: 50%;
top: 0;
margin-left: 0px;
margin-top: 0px;
border-left: 0px;
border-top: 0px;
padding-left: 0px;
padding-top: 0px;
}

div.one {
background-color: red;
width: 50%;
}

div.two {
background-color: green;
width: 50%;
display:none;
}

div.three {
width: 50%;
background-color: blue;
}

</style>

<script>
function clicked(t) {
t.style.display = "none";

if (t.id === 'divone') {
document.getElementById('divtwo').style.display = 'block';
} else {
document.getElementById('divone').style.display = 'block';
}
}
</script>
</head>
<body>
<div class="container">
<div id="divone" class="one" onclick="clicked(this)">DIV 1</div>
<div id="divtwo" class="two" onclick="clicked(this)">DIV 2</div>
<div class="three">DIV3</div>
</div>
</body>

</html>

关于javascript - 混合DIVS的绝对定位、相对定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36093632/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com