Html 响应定位元件

我有一个包含几个元素的标题。最重要的部分是一个滑块，一个横幅覆盖和3个所谓的“Pijler”。滑块和横幅覆盖效果很好，但“Pijler”没有。当屏幕宽度为全宽时，它们位于正确的位置，但当您将屏幕调整为较小的宽度时，它们不会随屏幕向左移动，因此会从屏幕上掉落

请不要介意使用的图片，它只是为了演示的目的

小提琴：

CSS

HTML

---

您绝对定位了

piljer

，因此无论您做什么，它们始终与容器左侧（900px）保持精确距离，或者实际上是距离最近的容器，而不是静态定位

为了让他们做出反应，你应该使用百分比定位，或者如果他们应该拥抱右手侧，则从右侧定位，这取决于你试图达到的效果类型。例如：

#durable {
    top : 252px;
    right : 50px;
}

<div id="page" class="site">
    <header class="site-header" role="banner"> <a href="#"><img src="http://tsk.nu/en/wordpress/wp-content/themes/atahualpa373/images/header/TSK-header1_1280x150.gif" id="banner-overlay"/></a>

        <div id="pijler-wrapper"> <a href="#"><img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="safe"/></a>
 <a href="#"><img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="durable"/></a>
 <a href="#"><img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="innovative"/></a>

        </div>
        <div class="headerslider">
            <img src="http://www.markbsplace.net/images/CloudsOnTheHorizon-1280-x600.jpg" id="headerslider" />
        </div>
    </header>
    <div>

#durable {
    top : 252px;
    right : 50px;
}