Confusion with position and z-index

**MilliR** · Apr 16, 2012 13:48

Hi there everyone!

I am having a serious brain-whacking problem... There might me an easy solution for this, but it's nowhere in my sight!

Well, the thing is that I want to display a textarea and a select option inside a div which has inset box-shadows. I need to give a white bgcolor to the textarea and a bluish one to the area after that. If i apply a color to the background of the elements, it overlaps the box shadows.
Here's my HTML

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<!--TITLE-->
	<title>Paste stuff</title>
	<!--STYLES-->
	<link rel="stylesheet" href="styles/test.css" />
	<link rel="stylesheet" href="styles/htmlreset.css" />
</head>
<body>
<div class="wrapper">

	<div class="prettybox">
		<div class="textarea">
			<textarea name="code" class="codesnip" placeholder="Write something..."></textarea>
		</div>
		<div class="langselect">
			<label for="langselect">Select language</label>
			<ul>
				<li data-value="html"><a href="#">HTML</a></li>
				<li data-value="css"><a href="#">CSS</a></li>
				<li data-value="javascript"><a href="#">JavaScript</a></li>
			</ul>
			<input type="hidden" id="langInput" name="codelang" value="plain" />
		</div>
	</div>
			
</div>
</body>
</html>

Now I tried applying a negative z-index to the child elements, and the shadows are displaying alright. But since I used -ve z-index, textarea is inaccessible and select buttons are not clickable! What can be the solution?

You can have a looksie here : http://tinkerbin.com/oevsUN4K

Code:

* { margin:0; padding:0; }
body {
	background:#b3dbf0 ;
}

.wrapper {
	margin:0 auto;
	width:960px;
	text-align:center;
}


.prettybox {
	border:5px solid #eef8fd;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: inset 1px 1px 5px 1px rgba(83, 113, 128, .3);
	-moz-box-shadow: inset 1px 1px 5px 1px rgba(83, 113, 128, .3);
	box-shadow: inset 1px 1px 5px 1px rgba(83, 113, 128, .3);
	position:relative;
	margin-top:40px;
}
.textarea {
	position:inherit;
	min-height:300px;
	max-height:600px;
	z-index:-1;
}
textarea  {
	outline: none !important;
	min-height:300px;
	max-height:600px;
	width:100%;
	border:0;
	overflow:hidden;
	background:#fff;
	resize:none;
	position:inherit;
	z-index:12;
}

.langselect {
	background:#e2f3fb;
	border-top:1px solid #d6e9f2;
	z-index:-10;
	position:inherit;

}

**ralph.m** · Apr 16, 2012 16:11

One thing you could do, instead of the z-indices, is put a 10px margin on the textarea and langselect boxes, and then remove the bg colors and put a bg image on the prettybox that is blue on the bottom and white at the top.

**MilliR** · Apr 16, 2012 17:21

That's a really good idea ralph.m! I'll have a look into it.

User Tag List

Thread: Confusion with position and z-index

Thread Tools

Display

Confusion with position and z-index

Bookmarks

Bookmarks

Posting Permissions