Question

我正在尝试使用.wpcf7-form类在WP插件表单中设置标题。在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-form”放在h3选择器的开头，但它改变了所有的css。

Answer 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*/
}

**编辑

看看你的jsFiddle示例。您需要向z-index添加h3媒体资源。

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

定位：绝对和相对问题

1 个答案: