Simple positioning problem for child element-CodePudding

Let's say I have this for loop to create 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
}

This all works fine, but I want to let the button position always keep the same position (vertcially) with the other buttons.

Now in my code, the button's height will be affected by the length and other child elements (p). I try use position:absolute or position:sticky, but both of them doesn't solve my problem.

Is there a way to make the position of child element to be absolute to only child element?

The effect I want to achieve are all the buttons could always have same vertically position with others.

CodePudding user response：

If what you want to achieve is the buttons to be vertically aligned on the same line, you can simply use CSS flexbox in .whole. By forcing the flex direction to column and then forcing spaces to be inserted between its children via justify-content: space-between, you can pretty much achieve what you want:

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%;
}

CodePudding user response：

This is a solution using a grid. Make whole a grid item and then use place-self and grid-row-start to place the buttons at the end; You can learn the complete working of grid here at CSS tricks.

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;
}