相对于窗口大小调整保持css定位

Question

我正在使用我正在做的网络应用程序处理一些CSS，我终于得到了我希望我的页面看起来像在css中编码的内容。

#searchNavBar {
    position: relative;
    width: 100%;
    left: -53%;
    top: -40px;
    height: 70px;
}

#searchResultsDoodle {
    position: absolute;
    left: 0px;
    top: 10px;
    width: 100px;
    height: 50px;
}

#searchResultsSearchBar {
    position: absolute;
    left: 110px;
    top: 10px;
    width: 690px;
    height: 50px;
}

#searchResultsSearchButton {
    position: absolute;
    left: 810px;
    top: 10px;
    width: 100px;
    height: 50px;
}

所以我在顶部有一个导航栏类型的东西，有一个图片，搜索栏和一个按钮。实际上从谷歌获得了很多灵感;）

现在看起来不错，但是，当我执行“ctrl +”，增加页面大小，格式化完全关闭，搜索栏被绘制到页面中心等等...是否有任何为这段代码编写CSS的方法，以便在我增加或减少页面大小的情况下，页面上的内容将尝试保持尽可能接近，按比例说，与我最初想要它们的位置保持一致在页面上？