How to position a DIV in relation to another DIV - css

Question

I illustrated in HERE a situation with a simple layout. I would like that all the elements keep their position when another element is modified. For example, if I change the Title font to more or less, the button2, will move and I don't want that. So is there a way to keep their position fixed even when other elements are modified?
<div id="slides">
<p class="title">TITLE GOES HERE</p>
<p class="description">Description goes here</p>
<div id="button1">BUTTON1</div>
<div id="button2">BUTTON2</div>
</div> <!-- end slides -->
#slides{
width:600px;
height:280px;
background:yellow;
}
p.title{
font-size:28px;
text-align:center;
position: relative;
top:40px;
}
p.description{
text-align: center;
position:relative;
top:20px;
}
#button1{
width:150px;
height:35px;
background:blue;
margin:0 auto;
line-height:35px;
text-align: center;
position:relative;
top:40px;
}
#button2{
width:85px;
height:25px;
background:red;
margin:0 auto;
line-height:25px;
text-align:center;
position:relative;
top:135px;
}

Answer 1

You're looking for elements relatively absolute positioned (or absolute relatively?).
You should set the parent #slides to position: relative and then the child elements should be position: absolute, with this you can set top, right, bottom or right properties in the children relatively to the #slide.
This way the children of #slides won't follow the flow when some other child changes.
http://codepen.io/anon/pen/yhFnb

Answer 2

Modify your css like this :
#slides{
width:600px;
height:280px;
background:yellow;
position: relative;
}
#button2{
width:85px;
height:25px;
background:red;
line-height:25px;
text-align:center;
position:absolute;
left: 50%;
margin-left : -42px;
bottom : -12px;
}
Demo http://codepen.io/anon/pen/gAcka
Hope it help.