postioning:絶対的および相対的な問題

私はwpcf7形式のクラスでWPプラグインのフォーム内に見出しを設定しようとしています。 CSS内では、フォーム上の相対的な位置と見出しが絶対的な位置にありますが、何らかの理由で見出しがページの最後で終わります。助言がありますか?

WPテンプレート

Get in Touch

<?php echo do_shortcode( '[contact-form-7 id="278" title="Contact form 1"]' ); ?>

CSS

h3.contact-heading{color:  #0C0; font: 2.0em Verdana, Geneva, sans-serif;font-weight: 
normal;letter-spacing: 5px; text-transform:uppercase; position: absolute;}

.wpcf7-form {background-color:#909673; border:none; color:#333; font:1.2em  
Verdana,Geneva,sans-serif; padding:50px 0px 30px 20px; position:relative; width:450px;}
.wcf7_name {height:25px; width:225px;}
.wcf7_email {height:25px; width:225px;}
.wcf7_subject {height:25px; width:225px;}
.wpcf7-captcha-captcha-803 {border: 2px dashed #333;}
.text-field {height:25px; width:75px;}
.wcf7_msg {height:200px; width:425px;}
.wpcf7-submit{font: 1.0em Verdana,Geneva,sans-serif; padding:5px 10px; 
 text-shadow:1px 1px 1px #999;} 

私はh3セレクタの始めに ".wpcf7-form"を入れようとしましたが、それはCSSのすべてを変更します。

1
あなたはそれに高さを与えるだけの簡単なものを試してみましたか?
追加された 著者 RSM,
フォームに高さを加えてページから外します
追加された 著者 tobeeornot,
htmlはプラグインによって生成されており、サイトはローカルで実行されています。 WPが出力しているコードへのリンクは次のとおりです: jsfiddle.net/NGhv4
追加された 著者 tobeeornot,
html出力も見ることができれば便利です。トップを追加してみてください:0;左:0;ヘッダースタイルに?
追加された 著者 Lee,
実際の例が役に立つでしょう。 h3 .wpcf7-form のクラスがある場合は、 h3.wpcf7 {...}
追加された 著者 peduarte,
以下の答えが追加されました。それはあなたの問題を解決します
追加された 著者 peduarte,

1 答え

top left のプロパティが欠落しているようです。

h3.contact-heading{
    color:  #0C0; 
    font: 2.0em Verdana, Geneva, sans-serif;
    font-weight: normal;
    letter-spacing: 5px; 
    text-transform:uppercase; 
    position: absolute;
    top: 0; /* ADD THIS */
    left: 0; /* ADD THIS*/
}

** EDIT

あなたのjsFiddleの例を見てください。 h3 z-index プロパティを追加する必要があります。

h3.contact-heading{
    ...
    z-index: 100;      
}
1
追加された
それはjfiddleであなたのために働いたのですか?私のコードではうまくいかなかった。
追加された 著者 tobeeornot,
クール - それは確かです。どうもありがとう。
追加された 著者 tobeeornot,
うん、そうだった。こちらをご覧ください: http://jsfiddle.net/peduarte/NGhv4/1/
追加された 著者 peduarte,