css定位

HTML中的三种布局方式

标准流
浮动
定位

position定位属性的意义

1. position属性决定了元素将如何定位

2. 通过top,right,bottom,left实现位置的改变

可选参数：

static(标准流)

relative(相对定位，通过top,right,bottom,left改变元素位置，后写的带有定位属性的元素的层级大于先写的元素的层级，先写的被覆盖)

left,top:

right,bottom:

absolute(绝对定位，使元素脱离文本流，通过top,right,bottom,left改变元素位置，后写的带有定位属性的元素的层级大于先写的元素的层级，先写的被覆盖)

举例1：

以左上角为起始点，以网页右端为x正轴，以网页下端为y正轴。

举例2：

若父元素不具有定位属性，则以窗口的四个角进行定位。

fixed(固定定位，元素脱离正常的文本流，通过top,right,bottom,left改变元素位置，在整个窗口进行移动)

使用场景：

对联广告
登陆弹窗

与固定定位区别：

不受制于父元素 例如：

inherit(继承父元素)

例子：

z-index

只作用于带有定位属性的元素

可以设置元素的叠加顺序，但依赖定位属性。
z-index大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较
z-index为负值，元素被普通流中的元素覆盖。

举例：z-index大的元素会覆盖z-index小的元素

注：父元素层级大于相邻元素的层级，子元素无论级别多小，都可以大于相邻的小于父元素的元素

区分：盒子模型是通过改变元素内外边距来改变元素的位置，定位通过元素位置移动来改变出现在网页的相对位置

水平垂直居中：

小例子

导航栏：

代码：

<!DOCTYPE html>
<html>
<head>
	<title>导航栏</title>
	<style type="text/css">
		*{margin: 0;
			padding: 0;}
		.page{
			width: 200px;
			height: auto;
			position: fixed;
			left: 0;
			top: 50%;
			margin-top: -103px;/*垂直居中*/
		}
		.nav-li{
			width: 200px;
			height: auto;
			border: 1px solid blue;
			background-color: pink;
			text-align: center;
			font-size: 22px;
			font-family: 宋体;
			
		}
		.nav-li ul{
			width: 200px;
			height: auto;
			background-color: #fff;
			display: none;
	
		}
		.nav-li ul li{
			width: 200px;
			height: 40px;
			border-bottom: 1px dashed #666;
			text-align: center;
			background-color: #ccc;
			line-height: 40px;
			cursor: pointer;/*改变鼠标形状*/
			position: relative;
		}
		.nav-li:hover ul{
			display: block;
		}/*hover:伪类 */
		.list3{
			width: 200px;
			height: auto;
			position: absolute;
			left: 200px;
			top: 0;
			display: none;
		}
		.li3{
			width: 200px;
			height: 40px;
			background-color: #444;
			text-align: center;
			line-height: 40px;
			color: #fff;
		}
		.nav-li ul li:hover  .list3{
			display: block;
		}
	</style>
</head>
<body>
	<div class="page">

			<div class="nav">
				<div class="nav-li">
				<div >导航栏</div>
				<ul>
					<li>
						二级栏目
						<div class="list3">
							<div class="li3">三级栏目</div>
							<div class="li3">三级栏目</div>
							<div class="li3">三级栏目</div>
						</div>
					</li>
				</ul>
				<ul>
					<li>二级栏目
						<div class="list3">
							<div class="li3">三级栏目</div>
							<div class="li3">三级栏目</div>
							<div class="li3">三级栏目</div>
						</div>
					</li>
				</ul>
				<ul>
					<li>二级栏目</li>
				</ul>
			</div>
			<div class="nav-li">
				<div >导航栏</div>
				<ul>
					<li>二级栏目</li>
				</ul>
				<ul>
					<li>二级栏目</li>
				</ul>
				<ul>
					<li>二级栏目</li>
				</ul>
			</div>
			<div class="nav-li">
				<div >导航栏</div>
				<ul>
					<li>二级栏目</li>
				</ul>
			</div>
			<div class="nav-li">
				<div >导航栏</div>
				<ul>
					<li>二级栏目</li>
				</ul>
			</div>
			<div class="nav-li">
				<div >导航栏</div>
				<ul>
					<li>二级栏目</li>
				</ul>
			</div>
			</div>
			
	</div>
</body>
</html>

实现：

css6 定位