Email input accessible outside div but not inside

HTML & CSS
1

I have an email type input inside a div, visible, but cannot access it, not selectable (cursor isn’t changing). I have another email input outside the div which is selectable. What might be causing this? This is the CSS

#Step1 {
    position: absolute;
    top: 15%;
    left: 25%;
    height: 70%;
    width: 50%;
}

HTML

<div id="Step1">
        <input type="email" name="Email" id="">
    </div>
1 Like
2

Something that you haven’t shown us is causing it :slight_smile:

The code you posted above works fine on its own.

You probably have other elements on the page that have a higher z-index and are covering that element or could be a few other things. We’d need to see the complete set up.

You can try adding a high z-index just to see if that is the issue but otherwise we will need more code to debug properly :slight_smile:

#Step1 {
    position: absolute;
    top: 15%;
    left: 25%;
    height: 70%;
    width: 50%;
  z-index:999;
}

Bear in mind that stacking levels are controlled by the closest positioned ancestor (that has a z-index other than auto) so you may need to go back up the tree to find it.

(Beware of using absolute positioning in a fluid responsive environment as it needs to be tightly controlled.)

1 Like
3

It looked like the position absolute vs relative was the issue, however the unput is not accessible with either, which doesn’t make sense.

1 Like
4

Use the inspect element feature of your browser’s developer tools to try and select your input. You’ll probably find it selects some other element that you have overlaying your input and thus preventing it from being focused.

1 Like
5

No that will likely have nothing to do with the issue and you should never move things with relative positioning anyway (unless you fully understand the implications).

The answer will more than probably be that your element is under something else and can’t be clicked.

Did you try adding the z-index as mentioned.

If we could see the problem it could be fixed very quickly :slight_smile:

1 Like