html5定位有哪几种-前端问答-PHP中文网

首页

web前端

前端问答

html5定位有哪几种

青灯夜游

Jan 11, 2022 am 11:18 AM

html5定位

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

html5定位有哪几种

本教程操作环境：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）。

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: absolute;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

将class="two"的div定位到距离6c04bd5ca3fcae76e30b72ad730ca86d的顶部和左侧分别50px的位置。会改变其他元素的布局，不会在此元素本来位置留下空白。

2、相对定位(relative相当于灵魂出窍的场面)

特点：

参照物为自身的默认位置
占据空间
不会破坏布局流

相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: relative;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

将class="two"的div定位到距离它本来位置的顶部和左侧分别50px的位置。不会改变其他元素的布局，会在此元素本来位置留下空白。

3、固定定位(fixed)

特点：

参照物为浏览器窗口

固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。

让一个元素在浏览器窗口左右上下居中的方式：

方法一：

position:fixed
left:50%;
top:50%;
margin-left: -盒子宽度的一半
margin-top:-盒子高度的一半

方法二：

position:fixed;
left:0;
right:0
top:0
bottom:0
margin:auto

4、粘性定位(sticky 存在兼容问题)

特点：

是relative 和fixed的结合
当页面没有触发滚动条的时候，执行的效果是position：relative，反之执行的是position：fixed
应用是：页面吸顶

<!DOCTYPE html>
<html>
	<meta charset="utf8">
	<head>
		<style>
			section:first-child {
				height: 200px;
				background-color: lightgray;
			}

			section:nth-child(2) {
				height: 100px;
				background-color: orange;
				position: sticky;
				position: -webkit-sticky;
				top: 50px;
			}

			section:nth-child(3) {
				height: 300px;
				background-color: lightgray;
			}

			section:nth-child(4) {
				height: 100px;
				background-color: orange;
				position: sticky;
				position: -webkit-sticky;
				top: 150px;
			}

			section:last-child {
				height: 500px;
				background-color: darkgray;
			}
		</style>
	</head>
	<body>
		<section>SECTION-1</section>
		<section>SECTION-2</section>
		<section>SECTION-3</section>
		<section>SECTION-4</section>
		<section>SECTION-5</section>
	</body>
</html>

5、静态定位（static 默认）

当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适应，取得相对较好的布局效果。

一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。

left,top属性对static没有效果，static是靠margin这些定位的。

相关推荐：《html视频教程》

以上是html5定位有哪几种的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

反应：JavaScript库用于Web开发的功能Apr 18, 2025 am 12:25 AM

React是由Meta开发的用于构建用户界面的JavaScript库，其核心是组件化开发和虚拟DOM技术。1.组件与状态管理：React通过组件（函数或类）和Hooks（如useState）管理状态，提升代码重用性和维护性。2.虚拟DOM与性能优化：通过虚拟DOM，React高效更新真实DOM，提升性能。3.生命周期与Hooks：Hooks（如useEffect）让函数组件也能管理生命周期，执行副作用操作。4.使用示例：从基本的HelloWorld组件到高级的全局状态管理（useContext和

React的生态系统：库，工具和最佳实践Apr 18, 2025 am 12:23 AM

React生态系统包括状态管理库（如Redux）、路由库（如ReactRouter）、UI组件库（如Material-UI）、测试工具（如Jest）和构建工具（如Webpack）。这些工具协同工作，帮助开发者高效开发和维护应用，提高代码质量和开发效率。

React和前端开发：全面概述Apr 18, 2025 am 12:23 AM

React是由Facebook开发的用于构建用户界面的JavaScript库。1.它采用组件化和虚拟DOM技术，提高了UI开发的效率和性能。2.React的核心概念包括组件化、状态管理（如useState和useEffect）和虚拟DOM的工作原理。3.在实际应用中，React支持从基本的组件渲染到高级的异步数据处理。4.常见错误如忘记添加key属性或不正确的状态更新可以通过ReactDevTools和日志调试。5.性能优化和最佳实践包括使用React.memo、代码分割和保持代码的可读性与可维

HTML中的反应力量：现代网络开发Apr 18, 2025 am 12:22 AM

React在HTML中的应用通过组件化和虚拟DOM提升了web开发的效率和灵活性。1)React组件化思想将UI分解为可重用单元，简化管理。2)虚拟DOM优化性能，通过diffing算法最小化DOM操作。3)JSX语法允许在JavaScript中编写HTML，提升开发效率。4)使用useState钩子管理状态，实现动态内容更新。5)优化策略包括使用React.memo和useCallback减少不必要的渲染。