Css 职位:绝对和相对问题

Css 职位:绝对和相对问题,css,css-position,Css,Css Position,我试图在一个WP插件表单中设置一个标题,其类为.wpcf7 form。在CSS中,我在表单上的位置是相对的,标题是绝对的,但由于某种原因,标题在页面底部结束。有什么建议吗 可湿性粉剂模板 <h3 class="contact-heading">Get in Touch</h3> <?php echo do_shortcode( '[contact-form-7 id="278" title="Contact form 1"]' ); ?> 我尝试将“.wp

我试图在一个WP插件表单中设置一个标题,其类为.wpcf7 form。在CSS中,我在表单上的位置是相对的,标题是绝对的,但由于某种原因,标题在页面底部结束。有什么建议吗

可湿性粉剂模板

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

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

我尝试将“.wpcf7表单”放在h3选择器的开头,但它更改了所有css。

看起来您缺少了
顶部的
左侧的
属性

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*/
}
**编辑

看看您的JSFIDLE示例。 您需要将
z-index
属性添加到
h3

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

看起来您缺少
顶部
左侧
属性

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*/
}
**编辑

看看您的JSFIDLE示例。 您需要将
z-index
属性添加到
h3

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

你有没有尝试过一些简单的方法,比如给它一个高度。给表单增加高度会把它推离页面。如果我们也能看到html输出的话,这会很有用。尝试添加顶部:0;左:0;标题样式?一个工作示例会很有帮助。如果
h3
有一个
.wpcf7 form
类,则尝试
h3.wpcf7{…}
html由插件生成,并且站点正在本地运行。这里有一个指向WP正在输出的代码的链接:您是否尝试过给它一个高度这样简单的方法向表单添加高度会将其推离页面如果我们也能看到html输出,那么它会很有用。尝试添加顶部:0;左:0;标题样式?一个工作示例会很有帮助。如果
h3
有一个
.wpcf7 form
类,则尝试
h3.wpcf7{…}
html由插件生成,并且站点正在本地运行。这里有一个指向WP正在输出的代码的链接:它在JFIDLE上对您有用吗?我的代码对我不起作用,是的。看这里:这对你来说有用吗?我的代码对我不起作用,是的。看这里: