0

私はdivコンテナ（ヘッダー）を持っています

div.header {
    width: 1024px;
    height: 115px;
    background-color: black;
}

内部にテキストを含む header_title という名前の h1 が含まれています。

#header_title {
    font: 80px 'Oxygen', sans-serif;
    letter-spacing: -8px;
    margin-left: 25px;
    text-shadow: 500px 35px 18px white, 300px -50px 30px lightblue;
}

私の画像にあるように、ヘッダー div のすぐ下にメニューがあります。

div から出るテキスト シャドウ (4 番目の文字、「g」) を設定した場合、とにかく表示され、途切れないようにすることはできますか?

オーバーフロー: 可視、および z-index ソリューションを試しましたが、機能しません =(

ありがとう。

ここに画像の説明を入力

ヘッダーのマークアップ:

 <div class=header>
      <h1 id=header_title>Programmazione</h1>
 </div> <!-- fine header -->    

 <div class=menu>
     etc......
4

2 に答える 2

1

heightのプロパティを削除して、シャドウに約 15px を指定してみてheaderくださいpadding-bottom。これでうまくいくはずです。

于 2012-04-28T18:29:53.907 に答える
0

HTMLマークアップをテストして確認する必要はありませんが、影がヘッダーdivの外に出ていることが起こっていると思います。あなたが提供したCSSには、そうではないという理由はありません。

何が起こっているかというと、次のメニュー画像がそれをブロックしています。ほとんどのブラウザでは、デフォルトでアイテムを配置している場合 (つまり、絶対的ではなく、相対的ではなく、固定されていない)、それらが重なっている状況では、次の隣人が上になります。また、要素をこのように配置する場合、z-index は影響しません。z-index は、相対要素、絶対要素、および固定要素でのみ機能します。

1 つの解決策は、両方の要素にposition:relative;を与えることです。次に、 z-indexを使用して、ヘッダー div をメニューよりも上に配置します。

于 2012-04-28T18:32:45.047 に答える