絕對定位+translate loop 是跟sibling相關的定位，不是相對position parent？

Question

我試圖沿着圓形路徑放置一系列圓圈 (div)。 我一直遇到一個問題，似乎同一個班級的絕對定位的兄弟姐妹正在根據他們兄弟姐妹的位置進行翻譯。 我確信我構建循環的方式很有趣，但我不知道如何實現它。

下面的 JS 已經注釋掉了沿圓繪制的邏輯，我只是想讓外圓元素在包含圓的中心點處絕對位於另一個元素之上。 但是，正如您在 Codepen（下面的鏈接，代碼塊之前）中看到的那樣，外圈位於對角線上，每個變換都添加到前一個變換中。

https://codepen.io/AceaSpades/pen/bGKXZNo

<!-- HTML -->
<main class='container'>
  <section id='containing-circle' class="containing-circle">
    <div class='center-circle' />
    <div id='circle-1' class='outer-circle' />
    <div id='circle-2' class='outer-circle' />
    <div id='circle-3' class='outer-circle' />
    <div id='circle-4' class='outer-circle' />
    <div id='circle-5' class='outer-circle' />
  </section>
</main>

/* CSS */
html,
body {
  background-color: black;
}

.container {
  height: 100%;
  width: 100%;
}

.containing-circle {
  width: 300px;
  height: 300px;
  margin: 40px auto;
  outline: 1px solid #fff;
  border-radius: 50%;
  position: relative;
}

.center-circle {
  top: 0;
  left: 0;
  position: absolute;
  background-color: hsl(0, 0%, 10%);
  width: 120px;
  height: 120px;
  border-radius: 100%;
  outline: 1px solid magenta;
}

.outer-circle {
  top: 0;
  left: 0;
  position: absolute;
  background-color: hsl(0, 0%, 10%);
  width: 80px;
  height: 80px;
  border-radius: 100%;
  outline: 1px solid pink;
}

// JS
const containingCircle = document.getElementById("containing-circle");
const radius = containingCircle.offsetWidth / 2;

const outerCircles = document.getElementsByClassName("outer-circle");
const width = containingCircle.offsetWidth,
  height = containingCircle.offsetHeight;

let angle = 0,
  step = 360 / outerCircles.length;

for (let i = 1; i <= outerCircles.length; i++) {
  let circle = document.getElementById("circle-" + i);
  let x = width / 2 - circle.offsetWidth / 2;
  let y = height / 2 - circle.offsetHeight / 2;
  circle.style.translate = x + "px " + y + "px";
  circle.style.top = 0;
  // let x = (width / 2) + (Math.cos(angle) * radius);
  // let y = (height / 2) + (Math.sin(angle) * radius);
  // outerCircles[i].style.left = x + 'px';
  // outerCircles[i].style.top = y + 'px';
  // angle += step;
}

Answer 1

div不是自關閉標簽。

解決方案：

<main class='container'>
  <section id='containing-circle' class="containing-circle">
    <div class='center-circle'></div>
    <div id='circle-1' class='outer-circle'></div>
    <div id='circle-2' class='outer-circle'></div>
    <div id='circle-3' class='outer-circle'></div>
    <div id='circle-4' class='outer-circle'></div>
    <div id='circle-5' class='outer-circle'></div>
  </section>
</main>

在你的代碼中，
每個outer-circle實際上都不是兄弟姐妹。
他們是相應outer-circle父母

因此：

 <section>
   <div class="outer-circle"/>
   <div class="outer-circle"/>
 </section>

相當於（在瀏覽器中）：

<section>
   <div class="outer-circle">
       <div class="outer-circle"></div>
   </div>
 </section>

Answer 2

這有效。 我留下了很多腳本，其中包含易於理解的所有步驟和控制台日志。

 const containingCircle = document.getElementById("containing-circle"); const outerCircles = document.getElementsByClassName("outer-circle"); const width = containingCircle.offsetWidth, height = containingCircle.offsetHeight; const rect_cc = containingCircle.getBoundingClientRect(); console.log(rect_cc); const radius_cc = rect_cc.width / 2; // or height, it's circle const xCenter_cc = rect_cc.left + radius_cc; const yCenter_cc = rect_cc.top + radius_cc; console.log(xCenter_cc, yCenter_cc, radius_cc); const offset_c = 80 / 2; let angle = 360 / outerCircles.length; let angle_cur = 0; for (let i = 1; i <= outerCircles.length; i++) { let circle = document.getElementById("circle-" + i); console.log(angle_cur); // Math.cos, sin need radians not degrees let rad = angle_cur * Math.PI / 180; let x = xCenter_cc + (radius_cc * Math.cos(rad)); let y = yCenter_cc + (radius_cc * Math.sin(rad)); console.log(x, y); circle.style.left = x - offset_c - rect_cc.left + 'px'; circle.style.top = y - offset_c - rect_cc.top + 'px'; console.log(circle.style.left, circle.style.top); angle_cur += angle; }

 html, body { background-color: black; margin: 0; }.container { height: 500px; width: 500px; margin: 20px; position: relative; }.containing-circle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; border: 1px solid #fff; border-radius: 100%; z-index: 1; }.center-circle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: hsl(0, 0%, 10%); width: 120px; height: 120px; border-radius: 100%; border: 1px solid magenta; z-index: 1; }.outer-circle { top: 0; left: 0; position: absolute; background-color: hsl(0, 0%, 10%); width: 80px; height: 80px; border-radius: 50%; outline: 1px solid pink; z-index: 2; }

 <main class='container'> <section id='containing-circle' class="containing-circle"> <div class='center-circle'></div> <div id='circle-1' class='outer-circle'></div> <div id='circle-2' class='outer-circle'></div> <div id='circle-3' class='outer-circle'></div> <div id='circle-4' class='outer-circle'></div> <div id='circle-5' class='outer-circle'></div> </section> </main>