html5定位有哪些

html5定位有哪些，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联主要从事成都做网站、网站设计、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务宁阳,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

html5定位有5种：1、绝对定位（absolute）；2、相对定位（relative）；3、固定定位（fixed）；4、粘性定位（sticky）；5、静态定位（static）。

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

html5中的几种定位方式

position设置块级元素相对于其父块的位置和相对于它自身应该在的位置

1、绝对定位(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

Two

.box { background: red; width: 100px; height: 100px; float: left; margin: 5px; } .two { position: relative; top: 50px; left: 50px; } One Two Three Four

SECTION-1

SECTION-2

SECTION-3

SECTION-4

SECTION-5

大橙子网站建设，新征程启航

html5定位有哪些

其他资讯