This is occurring because you currently have a style that is explicitly setting the z-index style to -1, which will render any elements unfocusable :
#centerDiv {
overflow: hidden;
background-color: white;
height: 688px;
position: relative;
z-index: -1; /* This is the culprit */
}
If you remove the z-index style or set it to a non-negative value, you should see that you can focus and use the <input> as expected.
Example
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
===================================================
Custom styles
===================================================
*/
html {
height: 100%;
}
body {
max-width: 100%;
min-height: 100%;
margin: auto;
font-family: "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow: hidden;
}
header {
height: 65px;
overflow: hidden;
}
header h1 {
float: left;
margin: 21px 0px 4px 10px;
font-size: 35px;
}
header h1 span {
color: limegreen;
}
header h3 {
float: right;
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
margin: 40px 8px 0px 0px;
}
#firstNav {
height: 46px;
background-color: dimgray;
box-shadow: 0px 5px 5px rgba(128, 128, 128, 0.6);
position: relative;
z-index: 5;
overflow: hidden;
}
#firstNav li {
display: inline-block;
list-style-type: none;
padding: 15px;
}
#firstNav a {
text-decoration: none;
color: white;
}
#firstNav li:hover {
background-color: black;
}
#firstNav li:active {
background-color: limegreen;
}
#secondNav {
z-index: -1;
float: left;
background-color: whitesmoke;
min-width: 13%;
height: 658px;
overflow-y: scroll;
padding-bottom: 30px;
}
#secondNav:hover {
overflow-y: scroll;
}
#secondNav h4 {
margin-top: 15px;
padding: 10px;
font-size: 24px;
}
#secondNav ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#secondNav li a {
text-decoration: none;
padding: 8px 10px 8px 18px;
color: black;
display: block;
}
#secondNav a:hover {
background-color: lightgray;
}
#centerDiv {
overflow: hidden;
background-color: white;
height: 688px;
position: relative;
/* z-index: -1; */
}
#centerDiv section {
float: left;
width: 75%;
border: 1px solid brown;
height: 520px;
margin: 10px;
padding: 20px;
}
#centerDiv aside {
border: 1px solid green;
height: 520px;
margin: 10px;
padding: 20px;
overflow: hidden;
}
#centerDiv footer {
clear: both;
font-size: 13px;
text-align: center;
padding: 10px;
margin: 10px;
line-height: 1.4;
display: flex;
align-items: center;
border: 1px solid limegreen;
height: 55px;
overflow: hidden;
position: relative;
}<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackoverflow.com/questions/37305992/stylesheet.css">
<script src="script.js"></script>
<title>My First Website</title>
</head>
<body>
<header id="bigHeader">
<h1>w3schools<span>.com</span></h1>
<h3>The world's largest web developer site</h3>
</header>
<nav id="firstNav">
<ul>
<li title="HTML Tutorial"><a href="#">HTML</a>
</li>
<li title="CSS Tutorial"><a href="#">CSS</a>
</li>
<li title="JAVASCRIPT Tutorial"><a href="#">JAVASCRIPT</a>
</li>
<li title="SQL Tutorial"><a href="#">SQL</a>
</li>
<li title="PHP Tutorial"><a href="#">PHP</a>
</li>
<li title="BOOTSTRAP Tutorial"><a href="#">BOOTSTRAP</a>
</li>
<li title="JQUERY Tutorial"><a href="#">JQUERY</a>
</li>
<li title="ANGULAR Tutorial"><a href="#">ANGULAR</a>
</li>
<li title="XML Tutorial"><a href="#">XML</a>
</li>
</ul>
</nav>
<nav id="secondNav">
<h4>CSS Tutorial</h4>
<ul>
<li><a href="#">CSS HOME</a>
</li>
<li><a href="#">CSS Introduction</a>
</li>
<li><a href="#">CSS Syntax</a>
</li>
<li><a href="#">CSS How To</a>
</li>
<li><a href="#">CSS Colors</a>
</li>
<li><a href="#">CSS Backgrounds</a>
</li>
<li><a href="#">CSS Borders</a>
</li>
<li><a href="#">CSS Margins</a>
</li>
<li><a href="#">CSS Padding</a>
</li>
<li><a href="#">CSS Height/Width</a>
</li>
<li><a href="#">CSS Text</a>
</li>
<li><a href="#">CSS Fonts</a>
</li>
<li><a href="#">CSS Links</a>
</li>
<li><a href="#">CSS Lists</a>
</li>
<li><a href="#">CSS Tables</a>
</li>
<li><a href="#">CSS Box Model</a>
</li>
<li><a href="#">CSS Outline</a>
</li>
<li><a href="#">CSS Display</a>
</li>
<li><a href="#">CSS Max-width</a>
</li>
<li><a href="#">CSS Position</a>
</li>
<li><a href="#">CSS Float</a>
</li>
<li><a href="#">CSS Inline-block</a>
</li>
<li><a href="#">CSS Align</a>
</li>
<li><a href="#">CSS Combinators</a>
</li>
<li><a href="#">CSS Pseudo-class</a>
</li>
<li><a href="#">CSS Pseudo-element</a>
</li>
<li><a href="#">CSS Navigation Bar</a>
</li>
<li><a href="#">CSS Dropdowns</a>
</li>
<li><a href="#">CSS Tooltips</a>
</li>
<li><a href="#">CSS Image Gallery</a>
</li>
<li><a href="#">CSS Image Opacity</a>
</li>
<li><a href="#">CSS Image Sprites</a>
</li>
<li><a href="#">CSS Attr Selectors</a>
</li>
<li><a href="#">CSS Forms</a>
</li>
<li><a href="#">CSS Counters</a>
</li>
</ul>
<h4>CSS3</h4>
<ul>
<li><a href="#">CSS3 Introduction</a>
</li>
<li><a href="#">CSS3 Rounded Corners</a>
</li>
<li><a href="#">CSS3 Border Images</a>
</li>
<li><a href="#">CSS3 Backgrounds</a>
</li>
<li><a href="#">CSS3 Colors</a>
</li>
<li><a href="#">CSS3 Gradients</a>
</li>
<li><a href="#">CSS3 Shadows</a>
</li>
<li><a href="#">CSS3 Text</a>
</li>
<li><a href="#">CSS3 Fonts</a>
</li>
<li><a href="#">CSS3 2D Transforms</a>
</li>
<li><a href="#">CSS3 3D Transforms</a>
</li>
<li><a href="#">CSS3 Transitions</a>
</li>
<li><a href="#">CSS3 Animations</a>
</li>
<li><a href="#">CSS3 Images</a>
</li>
<li><a href="#">CSS3 Buttons</a>
</li>
<li><a href="#">CSS3 Pagination</a>
</li>
<li><a href="#">CSS3 Multiple Columns</a>
</li>
<li><a href="#">CSS3 User Interface</a>
</li>
<li><a href="#">CSS3 Box Sizing</a>
</li>
<li><a href="#">CSS3 Flexbox</a>
</li>
<li><a href="#">CSS3 Media Queries</a>
</li>
<li><a href="#">CSS3 MQ Examples</a>
</li>
</ul>
</nav>
<div id="centerDiv">
<section id="theSection">
<article>
article
</article>
</section>
<aside id="theAside">
<form action="#" method="post">
<input type="password" name="username" placeholder="Username">
</form>
</aside>
<footer id="theFooter">
<p>W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2016 by Refsnes Data. All Rights Reserved. Powered by W3.CSS.</p>
</footer>
</div>
</body>
</html>