Question

我在HERE中用简单的布局说明了这种情况。我希望所有元素在修改另一个元素时保持其位置。例如，如果我将标题字体更改为更多或更少，则button2将移动，我不想要这样。那么即使其他元素被修改，有没有办法保持其位置固定？

<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，您可以设置top，right，{相对于bottom的孩子中的{1}}或right属性。

这样，＃slides的孩子在其他孩子改变时不会跟随流程。

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

Answer 2

像这样修改你的css：

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

演示http://codepen.io/anon/pen/gAcka

希望有所帮助。

如何根据另一个DIV定位DIV

2 个答案: