Css，div 定位出錯

Question

嘿，我像往常一樣在做一些 CSS 戰斗，我在這里找到了加號的幫助，但我並沒有太習慣於絕對和阻止。 所以我的問題是如何區分我的禮物？div 和頂部的 pap div 之間的規則？ 如您所見， pap 中的 left 規則是留下所有 div？

這是代碼：

<div id="pap">
<div id="box"><style>
*{background:#ac474b;}
#box {
  width: 140px;
  height: 140px;
  background: #FFFFFF;
  position: relative;
  margin: auto;
   top: 102px;}
#box::after{
    content: " ";
    position: absolute;
    display: block;
    background: #AC474B;
    height: 20px;
    top: 43%;
    left : 0px; 
    Right: 0px;
}
#box::before{
    content: " ";
    position: absolute;
    display: block;
    background: #AC474B;
    width: 20px;
    left: 43%;
    top : 0px; 
    bottom: 0px;}
#pap{
    width:20px;
    height: 20px;
    background: #ffffff; 
  position: relative;
    left: 122px;
  }

這是鏈接，以防您想現場試用！ https://cssbattle.dev/play/99

Answer 1

您的div元素似乎缺少結束標記。

添加后，一切都應該正常工作。

 *{background:#ac474b;} #box { width: 140px; height: 140px; background: #FFFFFF; position: relative; margin: auto; top: 102px; } #box::after{ content: " "; position: absolute; display: block; background: #AC474B; height: 20px; top: 43%; left: 0px; Right: 0px; } #box::before{ content: " "; position: absolute; display: block; background: #AC474B; width: 20px; left: 43%; top: 0px; bottom: 0px; } #pap{ width:20px; height: 20px; background: #ffffff; position: relative; margin: auto; top: calc(102px - 20px); }

 <div id="pap"></div> <div id="box"></div>