Javascript 混合绝对定位、div相对定位
好的，我想达到以下效果 我有两个div应该在彼此的上面。我有第三个分区，应该在两个分区的正下方。前两个div可以切换可见性，这样当一个可见时，另一个不可见（注意：我删除了javascript中的切换部分，以简化疑难解答）。但无论如何，第三个div应该低于其他两个div。几个小时前听起来很简单，但我遗漏了一些东西，非常感谢你的帮助 我创建了一个成对的HTML文件，其中只有重要的部分供您查看，希望能告诉我我在做什么 还请注意，我真的不想在div3上使用top属性，因为我可能希望动态更改前两个div的大小Javascript 混合绝对定位、div相对定位,javascript,html,css,Javascript,Html,Css,好的，我想达到以下效果 我有两个div应该在彼此的上面。我有第三个分区，应该在两个分区的正下方。前两个div可以切换可见性，这样当一个可见时，另一个不可见（注意：我删除了javascript中的切换部分，以简化疑难解答）。但无论如何，第三个div应该低于其他两个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>
函数（t）{
t、 style.visibility=“collapse”；
t、 style.opacity=0.0；
}
div{
高度：100px；
宽度：100%；
过渡时间：2s；
}
分区集装箱{
宽度：50%；
排名：0；
左边距：0px；
边际上限：0px；
左边框：0px；
边框顶部：0px；
左侧填充：0px；
填充顶部：0px；
}
第一组{
位置：绝对位置；
背景色：红色；
宽度：50%；
不透明度：1.0；
z指数：2；
}
第二组{
位置：绝对位置；
背景颜色：绿色；
宽度：50%；
不透明度：1.0；
z指数：1；
}
第三分区{
位置：相对位置；
排名：0；
宽度：60%；
背景颜色：蓝色；
}
<!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>
div{
高度：100px；
宽度：100%；
过渡时间：2s；
}
分区集装箱{
宽度：50%；
排名：0；
左边距：0px；
边际上限：0px；
左边框：0px；
边框顶部：0px；
左侧填充：0px；
填充顶部：0px；
}
第一组{
背景色：红色；
宽度：50%；
}
第二组{
背景颜色：绿色；
宽度：50%；
显示：无；
}
第三分区{
宽度：50%；
背景颜色：蓝色；
}
函数（t）{
t、 style.display=“无”；
如果（t.id=='divone'）{
document.getElementById（'divtwo'）.style.display='block'；
}否则{
document.getElementById（'divone'）.style.display='block'；
}
}
第一组
第2组
第三组