Question

我有一个小问题。我搜索了相关问题，但找不到任何东西。如果可能的话，我想在没有脚本的情况下解决这个问题，并且不需要调整体宽。

所以我们走了。我希望徽标显示在最大化窗口中显示的框区域内。

此外，我不想将相对位置放在元素上，因为它在标题和导航栏之间留下了很大的余量。

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

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

以下是代码： http://jsfiddle.net/NCZg8/4/`
＆GT;

  <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

为了防止元素走出右边的边界，你应该设置正确的属性而不是左边。

.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修复。

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

1 个答案: