позиционирование: абсолютные и относительные проблемы - PullRequest
Новая
       1

позиционирование: абсолютные и относительные проблемы

1 голос
/ 25 ноября 2011

Я пытаюсь установить заголовок в форме плагина WP с классом .wpcf7-form. В CSS у меня есть положение относительное в форме и заголовок к абсолютному, но по какой-то причине заголовок заканчивается внизу страницы. Есть предложения?

WP-шаблон 

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

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

Я попытался поместить ".wpcf7-форму" в начало селектора h3, но он изменяет все CSS.

1 Ответ

1 голос
/ 25 ноября 2011

Похоже, вам не хватает свойств 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.Вам необходимо добавить свойство z-index к вашему h3. 

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