最小化窗口时出现包装器外的绝对定位图像

Question

我有一个小问题。我搜索了相关问题，但找不到任何东西。 如果可能，我想在不使用脚本且不调整正文宽度的情况下解决此问题。

所以我们开始吧。我希望徽标显示在框区域内，因为它出现在最大化窗口上。

我也不想将相对位置放置在元素上，因为它在标题和导航栏之间放置了很大的边距。

我尝试过使用 body width 并将其设置在其他容器中。没有运气。

你可以在这里看到我的意思：http://imageshack.us/g/43/q3qr.jpg/。

这里是代码： http://jsfiddle.net/NCZg8/4/`
>

  <div id="page" class="hfeed site">
     <header id="masthead" class="site-header" role="banner">
        <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            <img class="Logo_wrapper" src="http://pizza-bar.gr/wordpress/wp-content/uploads/2013/09/PB_Logo.png"/>
        </a>
      </body>`

注意：尝试拉伸“结果”窗口，你会明白我的意思。 提前 Ty。

Answer 1

为了防止元素在右侧超出边界，您应该设置 right 属性而不是 left。

.Logo_wrapper{
    position:absolute;
    top:40%;
    right:5%;
    z-index:10;
}

更新小提琴：http://jsfiddle.net/NCZg8/6/

我也不想将相对位置放置在元素上，因为它在标题和导航栏之间放置了很大的边距。

为了使徽标出现在标题中，在标题元素上设置position:relative 很重要。要查看相对定位和绝对定位的更详细说明，请参见此处：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

你的边距问题可能可以用 css 解决。