Moving buttons to the bottom of an element - html

Question

I am using Material UI to create cards that take an argument Actions which is a list of buttons.
The length of the Card is relative to the text I enter, but all Cards will be the same height.
I am very new to CSS and still wrapping my mind around position: fixed, relative, absolute.
This is the code that renders the Card:
export function ViewCurrentPitches2(props) {
const actions = [
<FlatButton
label="Cancel"
primary={true}
onClick={props.closeEditPitch}
/>,
<FlatButton
label="Save"
primary={true}
keyboardFocused={true}
onClick={props.savePitchBeingEdited}
/>,
];
return (
props.state.savedPitches.map((pitch, i) => {
return(
<Card key={pitch.id} className = 'form-margin card-width' zDepth={3}>
<CardText>{pitch.subject} </CardText>
<CardText className='card'>{pitch.pitch}</CardText>
<CardActions>
<FlatButton label="Edit" onClick={(e) => {props.toggleEdit(e, pitch); console.log(props.state.pitchBeingEdited)}}/>
<Dialog
className="dialogBox"
title="Test"
modal={false}
actions={actions}
open={props.state.editPitch}
contentStyle={customContentStyle}
autoScrollBodyContent={true}
>
<TextFieldExampleCustomize currentValue = {props.state.pitchBeingEdited} updateNewPitch = {props.updatePitchBeingEdited} />
</Dialog>
<FlatButton label="Delete" onClick={(e) => {props.deletePitch(e, pitch)}} />
</CardActions>
</Card>
)
})
)
}
<div className='card-parent'>
<ViewCurrentPitches2
state= {this.state}
deletePitch = {this.deletePitch}
handleSave={this.dialogBoxSave}
toggleEdit = {this.toggleEdit}
closeEditPitch = {this.closeEditPitch}
updatePitchBeingEdited = {this.updatePitchBeingEdited}
savePitchBeingEdited = {this.savePitchBeingEdited}
/>
</div>
This is what it looks like:
Can anyone explain to me
1.) When I'm adding in the CSS position: relative | fixed | absolute ...etc what is happening? I assign that to the child correct?
2.) If I want to move the buttons to the bottom of the Card, Card is the parent and I put the styling on the button? How would I go about doing this?

Answer 1

Generally speaking, you would assign relative to the parent and absolute to the child. The child is being positioned absolutely, relative to the parent.
Refer to full documentation for more details.
.card{
display:inline-block;
width:200px;
height: 100px;
border: 1px solid red;
position: relative;
}
.buttons{
position: absolute;
bottom: 0;
border: 1px solid blue;
width: 100%;
}
<div class="parent">
<div class="card">
<div class="buttons">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="card">
<div class="buttons">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="card">
<div class="buttons">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div>