html - 难以在html中定位元素

我将元素从顶部和左侧绝对以％定位，并以％给出尺寸，但是当我调整窗口大小时，元素会彼此移动。

只是想知道是使用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;
}

最佳答案

我认为这已经接近您要达到的目标。如果您的意思与您的意思不符，请告诉我。

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