如何使文本与 HTML/CSS 中的形状重叠？

Question

在这里，我正在制作一个带有交互式按钮的食物金字塔，允许您添加和删除您在金字塔每个部分中所吃的食物量。 但是，我不确定如何让每个扇区的计数器（第一个三角形，然后是每个梯形）与它应该在的圆圈重叠。 例如，在第一个扇区（三角形）中，中间有一个圆圈，上面有一个计数器，右边是一个加号，左边是一个减号。

 .triangle { border-bottom: 150px solid #FF6347; border-left: 100px solid transparent; border-right: 100px solid transparent; height: 0; width: 0; margin-left: auto; margin-right: auto; white-space: nowrap; display: block; }.trapezoid { border-bottom: 100px solid #f58c57; border-left: 60px solid transparent; border-right: 60px solid transparent; height: 0; width: 220px; margin-left: auto; margin-right: auto; padding-bottom: 20px; }.trapezoid1 { border-bottom: 100px solid #fff894; border-left: 60px solid transparent; border-right: 60px solid transparent; height: 0; width: 360px; margin-left: auto; margin-right: auto; padding-bottom: 20px; }.trapezoid2 { border-bottom: 100px solid #83ccde; border-left: 60px solid transparent; border-right: 60px solid transparent; height: 0; width: 480px; margin-left: auto; margin-right: auto; }.trapezoid3 { border-bottom: 100px solid #a87d5c; border-left: 60px solid transparent; border-right: 60px solid transparent; height: 0; width: 600px; margin-left: auto; margin-right: auto; }.trapezoid4 { border-bottom: 100px solid #9effa6; border-left: 60px solid transparent; border-right: 60px solid transparent; height: 0; width: 720px; margin-left: auto; margin-right: auto; }.circle1{ height: 45px; width: 45px; background-color: #ffffff; border-radius: 50%; display: inline-block; margin-top: 100px; margin-left: -22px; margin-right: auto; opacity: 0.7; }.circle2{ height: 50px; width: 50px; background-color: #ffffff; border-radius: 50%; display: inline-block; margin-top: 45px; margin-left: 87px; margin-right: auto; opacity: 0.7; }.circle3{ height: 50px; width: 50px; background-color: #ffffff; border-radius: 50%; display: inline-block; margin-top: 45px; margin-left: 158px; margin-right: auto; opacity: 0.7; }.circle4{ height: 50px; width: 50px; background-color: #ffffff; border-radius: 50%; display: inline-block; margin-top: 25px; margin-left: 219px; margin-right: auto; opacity: 0.7; }.circle5{ height: 50px; width: 50px; background-color: #ffffff; border-radius: 50%; display: inline-block; margin-top: 25px; margin-left: 279px; margin-right: auto; opacity: 0.7; }.circle6{ height: 50px; width: 50px; background-color: #ffffff; border-radius: 50%; display: inline-block; margin-top: 25px; margin-left: 339px; margin-right: auto; opacity: 0.7; }.button1 { background-color: white; border: none; padding: 20px; height: 5px; width: 5px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: 0px; top: -18px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button2{ background-color: white; border: none; padding: 20px; height: 5px; display: none; width: 5px; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: -147px; top: -18px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button3 { background-color: white; border: none; padding: 20px; height: 10px; width: 10px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: 3px; top: -23px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button4 { background-color: white; border: none; padding: 20px; height: 10px; width: 10px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: 30px; top: -73px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button5 { background-color: white; border: none; padding: 20px; height: 10px; width: 10px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: 5px; top: -23px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button6 { background-color: white; border: none; padding: 20px; height: 10px; width: 10px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: -168px; top: -23px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button7 { background-color: white; border: none; padding: 20px; height: 10px; width: 10px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: 5px; top: -23px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button8 { background-color: white; border: none; padding: 20px; height: 10px; width: 10px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: -167px; top: -23px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button9 { background-color: white; border: none; padding: 20px; height: 10px; width: 10px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: 6px; top: -23px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button10 { background-color: white; border: none; padding: 20px; height: 10px; width: 10px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: -168px; top: -23px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button11 { background-color: white; border: none; padding: 20px; height: 10px; width: 10px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: 6px; top: -23px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.button12 { background-color: white; border: none; padding: 20px; height: 10px; width: 10px; display: none; margin-left: 0px; cursor: pointer; border-radius: 50%; position: relative; left: -169px; top: -23px; opacity: 0.7; text-align: center; text-decoration: none; line-height: 5px; }.piece:hover.button1, .piece:hover.button2, .piece:hover.button3, .piece:hover.button4, .piece:hover.button5, .piece:hover.button6, .piece:hover.button7, .piece:hover.button8, .piece:hover.button9, .piece:hover.button10, .piece:hover.button11, .piece:hover.button12{ display: inline-block; opacity: 0.7; }.text1{ text-align: center; line-height: 0px; font-family: "helvetica",serif; font-size: 20px; }

 <.DOCTYPE html> <html> <head> <link rel="stylesheet" href="assignment01:css"> </head> <body> <h1 style = "font-family; helvetica"><center>Figure 1</center></h1> <script type="text/javascript"> var clicks = 0; function onClick() { clicks += 1. document.getElementById("clicks");innerHTML = clicks; } function onClickm() { clicks -= 1. document.getElementById("clicks");innerHTML = clicks: } </script> <p class= "text1" id="clicks">0</p> <div class="triangle piece"> <div class="circle1 "></div> <div class="button1 " onClick="onClick()"><span>+</span></div> <div class="button2" onClick="onClickm()"><span>-</span></div> </div> <div class="trapezoid piece"> <div class="circle2 "></div> <div class="button3"><span>+</span></div> <div class="button4"><span>-</span></div> </div> <div class="trapezoid1 piece"> <div class="circle3 "></div> <div class="button5"><span>+</span></div> <div class="button6"><span>-</span></div> </div> <div class="trapezoid2 piece"> <div class="circle4 "></div> <div class="button7"><span>+</span></div> <div class="button8"><span>-</span></div> </div> <div class="trapezoid3 piece"> <div class="circle5 "></div> <div class="button9"><span>+</span></div> <div class="button10"><span>-</span></div> </div> <div class="trapezoid4 piece"> <div class="circle6 "></div> <div class="button11"><span>+</span></div> <div class="button12"><span>-</span></div> </div> <h2 style = "font-family: helvetica"><center>My Food Pyramid</center></h2> <label style = "font-family: helvetica" for="name"><center>Please Enter The Date:</center></label> <center><input type="text" id="name" name="name" required maxlength="9" size="10"></center> </body> </html>

Answer 1

为什么不把计数器直接放在HTML中的圆圈里呢？

<div class="triangle piece">
 <div class="circle1 "><p class= "text1" id="clicks">0</p></div>
 <div class="button1 " onClick="onClick()"><span>+</span></div>
 <div class="button2" onClick="onClickm()"><span>-</span></div>
</div>

然后你可以使用 .text1 css 到 position 它正好在中心。

.circle1{
  height: 45px;
  width: 45px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  margin-top: 100px;
  margin-left: -22px;
  margin-right: auto;
  opacity: 0.7;
  position: relative;
}

.text1{
  text-align: center;
  line-height: 0px;
  font-family: "helvetica",serif;
  font-size: 20px;
  position: absolute;
  left: 18px;
  top: 5px;
}

因为计数器在圆圈内并且圆圈有position:relative文本将相对于它所在的圆圈绝对定位。