css中的定位方式有哪些

这篇文章给大家分享的是有关css中的定位方式有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联服务项目包括甘谷网站建设、甘谷网站制作、甘谷网页制作以及甘谷网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，甘谷网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到甘谷省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

css有4种定位方式，分别为静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）；定位有不同的参数，例如left、right、top、bottom、z-index等。

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，css有4种定位方式，分别为：静态定位，相对定位，绝对定位，固定定位，定位有不同的参数，例如：left、right、top、bottom、z-index等。

1、静态定位（static）

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

2、绝对定位（absolute）

绝对定位的元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。

绝对定位的定位方法：如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）。

	
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: absolute;
			top: 50px;
			left: 50px;
		}
	


	One