HTML/CSS新手求助：嵌套div绝对定位对齐及随机变色实现

Hey there! Let's break down your problem step by step—absolute positioning nested boxes and random color switching is totally doable, even for 10 boxes. Let's start with the alignment first.

The key to getting perfectly aligned nested boxes with absolute positioning is leveraging the top, left, right, and bottom properties together. When you set all four on an absolutely positioned element, it will stretch to fill the space of its nearest positioned parent (any element with position: relative, absolute, or fixed), minus the values you define. This automatically centers the box and creates consistent spacing between nested layers.

Here's a working example for 3 boxes first:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button id="colorBtn">Randomize Colors</button>

.container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto; /* Centers the container on the page */
}

.box {
  position: absolute;
  border: 1px solid #ffffff; /* White border to clearly see each box's edge */
}

/* Set consistent offsets for each nested box */
.box:nth-child(1) {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box:nth-child(2) {
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

.box:nth-child(3) {
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
}

Each box gets an extra 20px of offset on all sides, so each layer is 40px smaller than the one before it (20px from top/bottom, 20px from left/right)—this creates that clean, evenly nested look.

Absolutely! You can give each box its own random color with a simple JavaScript function. We'll write a helper to generate random hex colors, then loop through all boxes and update their background when the button is clicked.

Add this script to your page:

// Helper function to generate a random hex color
function getRandomHexColor() {
  const hexValues = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += hexValues[Math.floor(Math.random() * 16)];
  }
  return color;
}

// Grab elements from the DOM
const colorButton = document.getElementById('colorBtn');
const boxes = document.querySelectorAll('.box');

// Add click event to the button
colorButton.addEventListener('click', () => {
  boxes.forEach(box => {
    box.style.backgroundColor = getRandomHexColor();
  });
});

Every time you click the button, each box will get a unique random color—no repeats guaranteed (well, technically there's a tiny chance, but it's negligible for this use case).

Manually writing 10 divs is tedious, so let's use JavaScript to generate them dynamically. We'll also use CSS variables to make the offset logic scalable without writing 10 nth-child rules.

Update your HTML to just the container and button:

<div class="container" id="boxContainer"></div>
<button id="colorBtn">Randomize Colors</button>

Update your CSS to use variables:

.container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 50px auto;
}

.box {
  position: absolute;
  border: 1px solid #ffffff;
  /* Calculate offset based on box index and base spacing */
  --offset: calc(var(--base-spacing) * var(--box-index));
  top: var(--offset);
  left: var(--offset);
  right: var(--offset);
  bottom: var(--offset);
}

Then add this JavaScript to generate the boxes:

const boxContainer = document.getElementById('boxContainer');
const totalBoxes = 10;
const baseSpacing = 12; // Adjust this to make layers closer or farther apart

// Generate 10 nested boxes
for (let i = 0; i < totalBoxes; i++) {
  const newBox = document.createElement('div');
  newBox.classList.add('box');
  // Set CSS variables for index and spacing
  newBox.style.setProperty('--box-index', i);
  newBox.style.setProperty('--base-spacing', `${baseSpacing}px`);
  boxContainer.appendChild(newBox);
}

// Reuse the color function and event listener from earlier
function getRandomHexColor() {
  const hexValues = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += hexValues[Math.floor(Math.random() * 16)];
  }
  return color;
}

const colorButton = document.getElementById('colorBtn');
const boxes = document.querySelectorAll('.box');

colorButton.addEventListener('click', () => {
  boxes.forEach(box => {
    box.style.backgroundColor = getRandomHexColor();
  });
});

This will generate 10 perfectly nested boxes, each spaced evenly apart. Adjust the baseSpacing value to make the layers tighter or more spread out, depending on your preference.

内容的提问来源于stack exchange，提问作者NeedyBoi