CSS问题，填写表单时，表头会上升 [英] CSS issue, when filling in a form the header goes up

问题描述

我有一个奇怪的CSS问题，我不确定如何解决这个问题。

当我按下我的网站上的登录按钮时，开始输入用户名，标题会上升。我真的不知道是什么导致了这种情况。

有什么想法？

谢谢！

以下是一些代码：

表格：

  .tooltip-wrap {
 position：fixed; 
 display：none; 
} 
 
 .tooltip-wrap .corner {
 position：relative; 
 z-index：100; 
 margin-left：-5px; 
 width：0; 
 height：0; 
 border：5px纯透明; 
 border-bottom-color：#fff; 
} 
 
 .tooltip-text {
 float：left; 
保证金余额：-50％; 
 padding：1em 15px; 
背景：#fff; 
颜色：＃333; 
} 
  

这是上升的部分：

  .header-navigation.back {
 z-index：-1; 
位置：绝对; 
 margin-left：0; 
 margin-top：-6px; 
 border：none; 
 display：block;高度：137px;宽度：1171px;填充：0像素;概述：无; TEXT-INDENT：-9999px; 
 background-image：url（'xhttp：//frenchegg.com/images/backmenu.png'）; 
} 
  

您需要点击用户名并开始输入内容。

解决方案

我认为解决方案包含以下内容：

设置 .header-wrap 有溢出：可见（好吧，删除溢出隐藏！） - 这意味着你必须将这些字符图形然后，将 .tooltip-wrap 更改为 position：absolute ; z-index：2; （不固定）。

我也注意到你的头上有占位符polyfill。这意味着你可以在输入中使用该属性而不是值;如下所示：

< input type =textname =user_loginplaceholder =Username>

非常可爱的网站！

I have a strange CSS issue, I'm not quite sure how to fix this.

When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.

Any ideas?

Thanks!

Here is some code:

The form:

.tooltip-wrap {
  position: fixed;
  display:none;
}

.tooltip-wrap .corner {
    position:relative;
    z-index:100;
    margin-left:-5px;
    width:0;
    height:0;
    border:5px solid transparent;
    border-bottom-color:#fff;
}

.tooltip-text { 
    float:left;
    margin-left:-50%;
    padding:1em 15px;
    background:#fff;
    color:#333;
}

This is the part that goes up:

.header-navigation.back {
    z-index:-1;
    position:absolute;
    margin-left:0;
    margin-top:-6px;
    border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}

You need to click on Username and start typing something.

解决方案

I think the solution is along these lines:

Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.

Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).

I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:

<input type="text" name="user_login" placeholder="Username">

Very cute site!

这篇关于CSS问题，填写表单时，表头会上升的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！