CSS知识点

一个200*200的div在不同分辨率屏幕上下左右居中

#testdiv{
	position:absolute;
	width:200px;
	height:200px;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
	z-index: 1000;
	background-color: red;
}

双飞翼布局：两边等宽，中间自适应的三栏布局

<div class = "ui-wrap">
	<div class = "s-middle"></div>
</div>
	<div class = "s-left"></div>
	<div class = "s-right"></div>

.ui-wrap{
	float:left;
	width:100%;
	overflow: hidden;
	clear: both;
}
.s-left, .s-right{
	float: left;
	height: 200px;
}
.s-left, .s-right{
	width:200px;
}
.s-middle{
	height: 200px;
	margin:0 200px;
	background:red;
}
.s-left{
	background:green;
	margin-left: -100%;
}
.s-right{
	margin-left: -200px;
	background:yellow;
}

position属性值：

static:

HTML元素的默认值，即没有定位，遵循正常的文档流对象
静态定位的元素不会受到top、bottom、left、right影响

div.static{
	position: static;
	border: 3px solid #73AD21;
}

fixed:

元素的位置相对于浏览器窗口是固定位置
即使窗口是滚动的它也不会移动

p.pos_fixed{
	position: fixed;
	top: 30px;
	right: 5px;
}

relative:

相对定位元素的定位是相对其正常位置

h2.pos_left
{
	position: relative;
	left: -20px;
}
h2.pos_right
{
	position: relative;
	left: 20px;
}

absolute:

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

h2
{
	position:absolute;
	left:100px;
	top:150px;
}

sticky:

把它称之为粘性定位，基于用户的滚动位置来定位，在relative和fixed定位之间切换。

div.sticky{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color:green;
	border: 2px solid #4CAF50;
}

拓展：z-index

指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有整数或负数的堆叠顺序