css - 如何相对于另一个 DIV 定位一个 DIV

Question

我在 HERE 中说明了布局简单的情况。我希望所有元素在修改另一个元素时保持其位置。例如，如果我将标题字体更改为更多或更少，按钮 2 将移动，而我不希望这样。那么有没有办法在修改其他元素的情况下保持它们的位置固定呢？

<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

您正在寻找相对绝对定位(或相对绝对定位？)的元素。

你应该将父元素 #slides 设置为 position: relative 然后子元素应该是 position: absolute，这样你就可以相对于 #slide.

这样，当其他 child 发生变化时，#slides 的 child 将不会跟随流程。

http://codepen.io/anon/pen/yhFnb