Darama Darama - 4 years ago 108
CSS Question

How to display textarea over all elements?

I have simple HTML code with one textarea element. When I click it I need to set opacity 0.8 to body and display textarea over body.

How to do this?

I tried:

body {
opacity: 0.8;
z-index: 1
}

textarea {
position:relative:
z-index:100;
}

Answer Source

I believe that what you're trying to achieve is to focus the user's attention on the textarea. So, you almost have the solution. Apart from using the right value for position (as mentioned by @Andrey Fedorov), you should use the :focus pseudo-class as follows:

body {
    opacity: 0.75;
    z-index: 1;
}

textarea {
    position: absolute;
    opacity: 0.8;
}

textarea:focus {        
    z-index: 100;
    opacity: 0.95;
}

This way, the textarea is slightly distinct from when the page is loaded. But when the user now clicks it, it is made even more distinct from the rest of the page.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download