Question

I am trying to set a heading within a WP plugin form with a class of .wpcf7-form. Within the CSS I have the position to relative on the form and the heading to absolute but for some reason the heading ends at the bottom of the page. Any suggestions?

WP template

<h3 class="contact-heading">Get in Touch</h3>

<?php echo do_shortcode( '

 




 Your name

 

 Your email

 

 Subject

 

 Your message (optional)

 





' ); ?>

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;} 

I have tried putting the “.wpcf7-form” at the beginning of the h3 selector but it changes all of the css.

Answer 1

Looks like you’re missing the top and left properties.

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

Had a look at your jsFiddle example.
You need to add a z-index property to your h3.

h3.contact-heading{
    ...
    z-index: 100;      
}