1

相対/絶対/その他と負のマージンなど、考えられるすべての位置のバリエーションを試した後、 http：//itlaunchpadで2つの緑色のバーをヘッダー画像（上部と下部）にオーバーレイする方法を教えてもらえないかと思います。 .patienceandfortitude.com /iphone-cant-get-your-email/。

* WordPressのカスタム画像ヘッダーが応答性を処理する方法のため、メインヘッダーはimgのままで、背景プロパティにならないようにする必要があることに注意してください。

どうもありがとう！

4

3 に答える 3

5

共通の祖先要素内に 2 つのバーを絶対に配置します。例えば：

​<header>
    <nav><a href="#">Foobar</a></nav>
    <img src="http://placekitten.com/640/200" />
    <nav><a href="#">Foobar2</a></nav>
</header>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

また、次の CSS を使用します。

​header { 
    position: relative
}
nav:nth-of-type(1) { 
    top: 0
}
nav:nth-of-type(2) { 
    bottom: 0
}
nav {
    background-color: rgba(0,255,0,.25);
    box-sizing: border-box;
    position: absolute;
    width: 100%;
}

次のようになります: http://jsfiddle.net/M3jyV/

于 2012-12-05T05:27:18.450 に答える
1

このcssを試してください

 and make the inline css to external css its for your reference (inline css).

bootstrap.css line 5416

#masthead.container {
    padding: 0;
    position: relative;
    width: 1198px;
}


app.css line 13

#banner {
    position: absolute;
}

bootstrap.css line  3779

.navbar {
    color: #777777;
    overflow: visible;
    position: absolute;
    width: 100%;
}


<div class="container" style="width:100%">
<header style="margin-top: -40px;" class="navbar" role="banner">

画像を参照してください:

ここに画像の説明を入力

于 2012-12-05T05:32:35.270 に答える
0

CSSz-indexプロパティを使用できます

例-http ：//brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

 DEMO - http://jsfiddle.net/xY5Re/75/
于 2012-12-05T05:51:48.577 に答える