html - 在html中定位元素有困难

Question

我将元素从顶部和左侧绝对定位在 % 中，并以 % 给出尺寸，但是当我重新调整窗口大小时，元素会相互移动。

只是想知道是使用 jQuery 来定位事物还是使用任何其他方式？这是一个小提琴Fiddle

   .the_club_photo
 {
position:absolute;
width:100%;
height:40%;
top:60px;
left:0px;
background-color:#fff;
overflow:hidden;
 }
  .question_container
  {
position:absolute;
top:47%;
left:0px;
height:30%;
width:80%;
background-color:#2a2a2a;
  }


 .search_ur_club_container
{
position:absolute;
top:47%;
left:80%;
height:;
width:;
margin:auto 3px;
background-color:#2a2a2a;
}

Answer 1

我认为这接近你想要达到的目标。如果某些事情看起来不像你的意思，请告诉我。

http://jsfiddle.net/FhuMt/

HTML：

<div class="topSpacer"></div>
<div class="header">
    <div class="headerbg"></div>  
</div>
<div class="body">
    <div class="content">
    </div>
    <div class="navigation">
    </div>
</div>

CSS：

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  vertical-align: baseline;
  background-color:#1a1a1a;
}

.topSpacer {
    height: 60px;
}

.header {
    position: relative;
    width: 100%;
    padding-bottom: 25%;
}
.headerbg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(http://1.bp.blogspot.com/-Q4xE6-3pFqo/UToBOlRN3JI/AAAAAAAAADw/Jh8H293L_bo/s1600/Manchester+United2.jpg);
    background-size:cover;
    background-position: 50% 50%;
}

.body {

}

.content {
    width: 75%;
    background-color: #2a2a2a;
    float: left;
    min-height: 300px;
}

.navigation {
    width: 20%;
    margin-left: 5px;
    background-color: #2a2a2a;
    float: left;
    min-height: 300px;
}