将图像放在所有元素的顶部

Question

我已经在我的网站上为我的时事通讯制作了一个横向选择栏。

关键是我已经使用CSS替换了图像的提交按钮：

#mc_embed_signup input.button {
background: url(http://urltotheimg.com/image.jpg);
background-repeat: no-repeat;
border: none;
position: absolute!important;
left: 720px;
top: -15px;
width: 120px!important;
height: 120px!important;
}

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form class="validate" id="mc-embedded-subscribe-form" action="**here I put the action to suscribe**" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div class="mc-field-group">
<font color="white" size="4">¡Empieza a triunfar en Internet!</font><input class="required" id="mce-FNAME" type="text" name="FNAME" placeholder="Tu nombre (sin apellidos)" value="" />
<input class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="Tu email" value="" />
<input type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form></div>
<!--End mc_embed_signup-->

但由于某种原因，按钮会被裁剪到顶部。

你知道我怎么能解决这个问题？非常感谢你。

编辑： 由于我还无法发布图片，您可以了解它在网站上的外观：http://javierferrandez.com

Answer 1

我无法看到你的例子中发生了什么，但是top: -15px结合绝对位置将会切断屏幕顶部的一些按钮。更改为top: 0;以使其位于顶部，或者将值设置为正值。

#mc_embed_signup input.button {
background: url(http://urltotheimg.com/image.jpg);
background-repeat: no-repeat;
border: none;
position: absolute!important;
left: 720px;
top: 0;
width: 120px!important;
height: 120px!important;
}

Answer 2

请尝试下面的代码并告诉我这是否适合您。

在css中，删除position：absolute和top：-15px属性并添加margin-top：20px;

<div class="mc-field-group">
<div><input class="required" id="mce-FNAME" type="text" name="FNAME" value="" />
<input class="required email" id="mce-EMAIL" type="email" name="EMAIL" value="" /></div>
<input type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

希望这有帮助

由于

Answer 3

问题在于 .container div 元素，包装表单..

属性，overflow:hidden导致此问题。

删除它..！

更改以下规则，页面将被设置..！

//reduced width & min-width to make things nice.!
.mc-field-group {
    background-color: #F68D31;
    padding: 10px;
    width: 1000px;
    min-width: 1000px;
}
//removed overflow property below
.container {
    position: relative;
    margin: 0px auto;
    max-width: 1140px;
}

---

使元素适合总宽度＆amp;中心

添加此css！

selector {
    margin:0 auto;
    width:100%;
}

请注意下面的造型

.layout-boxed .outer-container, .container {
max-width: 1000px; /*Remove this property*/
}

.container {
position: relative;
margin: 0 auto;
max-width: 1140px; /* Remove this property too */
overflow: hidden;
}

添加以下属性

#mc_embed_signup {
background-color: #F68D31; /*Added background-color*/
}

.mc-field-group {
background-color: #F68D31; /*You can remove the background here */
padding: 10px;
margin: 0 auto;
width: 850px; /*This should be fixed one, but value can be of your own */
}

#mc_embed_signup input.button {
background: url(http://javierferrandez.com/wp-content/uploads/2014/10/equis-e1415619436433.png);
background-repeat: no-repeat;
top: -15px;
border: none;
position: absolute !important;
/* right: 250px; */ /*Removed it */
width: 120px!important;
height: 120px!important;
margin-left: 20px; /*Newly added property */
}