子元素的简单定位问题

Question

假设我有这个 for 循环来创建 HTML。

 let content; for (let i = 0; i < 4; i++) { if (i % 2 == 0) { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8]" } else { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers." } document.body.innerHTML += ` <div class='whole'> <p>${content}</p> <button class='buttons'>Click</button> <button class='buttons'>ADD</button> </div>` }

 body { display: grid; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: repeat(2, auto); }.whole { width: 200px; }.buttons { position: relative; top: 10px; left: 200px }

这一切都很好，但我想让按钮 position 始终与其他按钮保持相同的 position （垂直）。

现在在我的代码中，按钮的高度将受到长度和其他子元素（ p ）的影响。 我尝试使用position:absolute或position:sticky ，但它们都不能解决我的问题。

有没有办法使子元素的 position 对唯一的子元素是绝对的？

我想要达到的效果是所有按钮总是可以与其他按钮垂直 position 相同。

Answer 1

如果您想要实现的是将按钮垂直对齐在同一行，您可以简单地在 .whole 中使用 CSS .whole 。 通过将 flex 方向强制为column ，然后通过justify-content: space-between强制在其子项之间插入空格，您几乎可以实现您想要的：

 let content; for (let i = 0; i < 4; i++) { if (i % 2 == 0) { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8]" } else { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers." } document.body.innerHTML += ` <div class='whole'> <p>${content}</p> <button class='buttons'>Click</button> </div>` }

 body { display: grid; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: repeat(2, auto); }.whole { width: 200px; display: flex; flex-direction: column; justify-content: space-between; }.buttons { position: relative; width: min-content; left: 100%; }

Answer 2

这是使用网格的解决方案。 使整个网格项目，然后使用 place-self 和 grid-row-start 将按钮放在最后； 您可以在 CSS 技巧中了解网格的完整工作。

 let content; for (let i = 0; i < 4; i++) { if (i % 2 == 0) { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] Stack Overflow is a question and answer website for professional and enthusiast programmers." } else { content = "Stack Overflow is a question and answer website for professional and enthusiast programmers." } document.body.innerHTML += ` <div class='whole'> <p>${content}</p> <button class='buttons'>Click</button> <button class='buttons'>ADD</button> </div>` }

 body { display: grid; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: repeat(2, auto); }.whole { display: grid; width: 200px; column-gap: 5px; }.buttons { position: relative; grid-row-start: 2; height: 20px; place-self: end; }