Css 如何在两个div之间设置div

我需要做一些像这样的东西，我怎样才能在这两者之间做正方形呢？这是CSS和

我的Css

#up{  
    width:100%;
    height:30%;
   }
#down{  
    width:100%;
    height:70%;
   }
#square{  
    width:40px;
    height:40px;
   }

我可以在不计算中线位置百分比的情况下设置正方形吗？（因为我想将所有类似的内容添加到web的所有会话中，会话的高度将根据文本长度进行响应，您可以将

正方形设置为：

<div id="div1"></div>

---

将正方形放在第二个div中，给它一个

位置：绝对

和一个

顶部：-20px

（和

左侧：Xpx

-即您需要/想要的任何东西）

使用position:absolute到您的小盒子div，您可以轻松完成此操作

以下是可以帮助您的解决方案

body，
html{
身高：100%；
边际：0px；
}
#向上{
宽度：100%；
身高：30%；
背景：红色；
}
#向下{
宽度：100%；
身高：70%；
背景：蓝色；
}
#方格{
宽度：40px；
高度：40px；
背景：绿色；
位置：绝对位置；
顶部：calc（30%-20px）；
保证金：0px自动；
左：0px；
右：0px；
z指数：1；
}

---

您需要使用相对于外部div的位置和相对于内部div的位置

这是你如何做到的链接

.one，
.2，
.三{
宽度：100%；
高度：50px；
}
.一{
背景：黄色；
位置：相对位置；
}
.二{
背景：绿色；
}
.三{
背景：红色；
}
.广场{
位置：绝对位置；
底部：-10px；
右：30px；
高度：20px；
宽度：20px；
背景：白色；
}

---

上传html/css，这样我们就可以处理一些事情，而不是什么都做。

#div1{
 border: 1px red;
 height: /*enter the height */
 width: /* enter the width */
 position: relative;
 left: /*enter the distance */
 right: /*enter the distance */
 top: /*enter the distance */
 bottom: /*enter the distance */
 z-index: 100 /* make sure other div's have z index lesser than this div's */
}