Question

我对此没有任何喜悦所以任何帮助都会非常感激。基本的问题是，当我点击登录时，它会向我显示用户名的输入框，但是我无法将注意力集中在框中以输入任何内容。如果我将css从position：absolute更改为relative，它可以工作但是会破坏布局。同样，如果我删除“关于”选项卡的代码，它也可以。我猜可能会出现分层问题，因为每个标签的下拉列表占据相同的空间，但到目前为止它却让我失望。我在Chrome和IE11工作。这是一个个人项目，所以不要担心其他浏览器兼容性。

以下是代码：

<body>
<style>
.panel div {
opacity:0;
width: 100%;
position:absolute;
top: 34px;
}
.panel .tab-link {
float: left;
width: 20%;
padding: 7px;
background:#ddd;
margin-right: .5%;
text-align: center;
}

.anchor:target + .panel div {opacity: 1;background: #ccc;}
.anchor:target + .panel .tab-link {opacity:1;background: #ccc;}
</style>

<span class="anchor" id="login"></span>
<div class="panel">
    <a class="tab-link" href="#login">Login</a>
    <div>
        <div>
            <input name="test" type="text" placeholder="Username or email" value="" autofocus>
        </div><br><br><br>
    </div>
</div>
<span class="anchor" id="about"></span>
<div class="panel">
    <a class="tab-link" href="#about">About</a>
    <div><h2>Hello World</h2></div>
</div>
</body>

或者我有一个jsfiddle给你。

http://jsfiddle.net/PCaAC/

Answer 1

您需要在CSS中将z-index:2;添加到您的输入中。

Answer 2

正如Beardminator所说。 z指数就足够了。但是，我不会使用2.如果在z-index中跳过一些优先级，则会在分层中留下空白。使用1.为了防止你需要对其他东西进行分层，你可以使用2等等。

.panel .tab-link {
   float: left;
   width: 20%;
   padding: 7px;
   background:#ddd;
   margin-right: .5%;
   text-align: center;
   z-index:1;
}

另外，我更改了你的html以获得更稳定的标记。你有一个不需要的额外div设置

检查fiddle

<input />没有在css下拉列表中工作

2 个答案: