站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

html5定位有哪几种

时间:2022-01-13 [网络编程]作者:fabuyuan 浏览:4 次

html5定位有5种:1、绝对定位(absolute);2、相对定位(relative);3、固定定位(fixed);4、粘性定位(sticky);5、静态定位(static)。

html5定位有哪几种  2

本教程操作环境: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定位到距离<body>的顶部和左侧分别50px的位置。会改变其他元素的布局,不会在此元素本来位置留下空白。

html5定位有哪几种  2

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的位置。不会改变其他元素的布局,会在此元素本来位置留下空白。

html5定位有哪几种  2

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>

html5定位有哪几种  2

5、静态定位(static 默认)

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

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

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

相关推荐:《html视频教程

以上就是html5定位有哪几种的详细内容,更多请关注站长家园其它相关文章!

本文标签:  html5定位

转载请注明来源:html5定位有哪几种

本文永久链接地址:https://www.adminjie.com/post/7615.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 完全掌握JavaScript执行机制

      完全掌握JavaScript执行机制

      本篇文章给大家带来了关于JavaScript执行机制的相关问题,其中包括JavaScript单线程和JavaScript同步异步的相关知识,希望对大家有帮助。一...

    • 手把手教你CSS架构之SMACSS

      手把手教你CSS架构之SMACSS

      本篇文章给大家带来了关于css架构SMACSS的相关知识,其中会讲到什么是smacss以及该架构分类的相关问题,希望对大家有帮助。因为CSS只有一个作用域,...

    • 一起聊聊MySQL基础之触发器和事件

      一起聊聊MySQL基础之触发器和事件

      本篇文章给大家带来了关于mysql中触发器和事件的相关知识,其中包括触发器使用注意事项、查看和删除事件、事件使用注意事项等等,希望对大家有帮助。触发器我们使用M...

    • 使用jq如何删除css样式

      使用jq如何删除css样式

      删除方法:1、用removeClass()或toggleClass()移除指定CSS类,语法“removeClass("类名")”或“toggleClass("...

    • css3如何让盒子水平居中

      css3如何让盒子水平居中

      css3让盒子水平居中的方法:1、使用margin属性,给盒子元素添加“margin:0auto;”样式即可水平居中;2、利用flex弹性布局来实现水平居中...

    热门文章