position学习终结者(一)

已于 2023-04-12 15:13:57 修改
阅读量3.7k 收藏 3
点赞数 3
分类专栏： CSS 文章标签： HTML CSSposition学习终结 position
于 2014-06-11 21:02:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaohuanjie/article/details/30089393
版权

        position的值有以下五种，现结合例子谈一下我对这五种值的认识：

        一、不使用任何值：

        代码1-1如下： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			.parent{
				width:300px;
				height:300px;
				background-color:gray;
			}
			
			.son1{
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son1">son1</div>
			<div class="son2">son2</div>
		</div>
	</body>
</html>

图1-1

        二、static：默认值。没有定位，元素忽略 top, bottom, left, right 或者 z-index 声明，按照正常的文档流进行排列。

        代码2-1如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			.parent{
				width:300px;
				height:300px;
				background-color:gray;
			}
			
			.son1{
				position:static;
				left:60px;
				top:60px;
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son1">son1</div>
			<div class="son2">son2</div>
		</div>
	</body>
</html>

图2-1

        总结：

        ①、比对图1-1与图2-1可以发现两者没有什么差别，这说明static是position的默认值；

        ②、上面代码son1 div样式中设置了left和top属性，但从图2可以发现这些属性的设置并没有起到应有的作用，这印证了position为static时会忽略 top, bottom, left, right 或者 z-index 声明

        三、relative：这个单词本身是“相关、相对”的意思，从这个单词可以看出该值的作用，不过这里要搞清楚它是相对哪个对象来进行偏移的。

        代码3-1如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			.parent{
				width:300px;
				height:300px;
				background-color:gray;
			}
			
			.son1{
				position:relative;
				left:60px;
				top:60px;
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son1">son1</div>
			<div class="son2">son2</div>
		</div>
	</body>
</html>

图3-1

        总结：

        ①、对比图1-1代码和图3-1代码，对比图1-1和图3-1，可以得出这样的结论：son1是相对它原来的位置进行偏移的；

        ②、哪些属性可以设置son1的偏移位置：top、right、bottom、left都可以做到；

        ③、son1和son2属于同级，son1偏移后，那son2偏移了吗？son2没有偏移，它依然在原来的位置，其实①已经可以回答这个问题了，可以这样理解：如果没有设置position的值，son1的位置会按照正常的文档流进行排列；如果设置son1 position属性的值为relative，son1的位置会按照top、right、bottom、left的值进行位置偏移，这种偏移是相对它原来的位置进行的（relative的“相对的”意思也正体现于此）；

        ④、如果为son2也添加position的值为relative并添加left等属性，会发生什么？通过①可以回答这个问题：会按照son2原来的位置进行相对的偏移，还是那句话——这里的“相对”是与原来的位置相比；

        ⑤、呵呵呵，上面几点中有三点提到了“原来的位置”，那么它相对于原来位置的哪个部位偏移的呢？中心吗？不是的，relative的偏移是基于对象的margin的左上侧的来说的；

        四、absolute：毫不掩饰，当初学习这块儿时，就是这个absolute把我弄懵了，呵呵呵，下面通过例子来一层层的理解这个absolute（注意：为了更好地理解absolute值，请先“忘掉前面讲的一切”）：

        代码4-1如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body{
				margin:0px;
				background-color:gray;
			}
			
			.son1{
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="son1">son1</div>
		<div class="son2">son2</div>
	</body>
</html>

图4-1

        说明：观察代码4-1可知上图中没有使用position属性，也就是说position属性的值为static；

        代码4-2如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body{
				margin:0px;
				background-color:gray;
			}
			
			.son1{
				position:relative;
				left:150px;
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="son1">son1</div>
		<div class="son2">son2</div>
	</body>
</html>

图4-2

        说明：比对代码4-1和代码4-2，可以看到唯一变化的地方就是son1的样式添加了“position:relative;left:150px;”；

        代码4-3如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body{
				margin:0px;
				background-color:gray;
			}
			
			.son1{
				position:absolute;
				left:150px;
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="son1">son1</div>
		<div class="son2">son2</div>
	</body>
</html>

图4-3

        说明：比对代码4-2和代码4-3，可以看到唯一变化的地方就是son1的样式position的属性值有relative改为了absolute；

        总结：

        ①、对比图4-2和图4-3可以很轻易的得出relative和absolute的一个区别：relative所作用的元素移动后，原来的位置没有被其它元素占用；absolute所作用的元素移动后，原来的位置会被其它元素占用；

        ②、absolute影响的元素移动后之所以会被其它元素占用是因为被absolute影响的元素脱离了文档流，不在自上而下、自左而右的显示元素，而另一个元素（son2）则没有脱离文档流，这时没有脱离文档流的元素直接从父元素（body相对于son2而言是父元素）开始定位，即言没有脱离文档流的元素（son2）的文档流不再基于absolute影响的元素（son1）而是基于父元素定位，于是就看到了这种情形；

        代码4-4如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body{
				margin:0px;
				background-color:gray;
			}
			
			.parent{
				margin-left:50px;
				width:300px;
				height:300px;
				background-color:yellow;
			}
			
			.son1{
				position:absolute;
				left:150px;
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son1">son1</div>
			<div class="son2">son2</div>
		</div>
	</body>
</html>

图4-4

        说明：观察代码4-4可知class为parent的div没有使用position属性，也就是说其position属性的值为static；

        代码4-5如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body{
				margin:0px;
				background-color:gray;
			}
			
			.parent{
				position:absolute;
				margin-left:50px;
				width:300px;
				height:300px;
				background-color:yellow;
			}
			
			.son1{
				position:absolute;
				left:150px;
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son1">son1</div>
			<div class="son2">son2</div>
		</div>
	</body>
</html>

图4-5

        说明：观察代码4-5可知class为parent的div的position属性的值为absolute；

        代码4-6如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body{
				margin:0px;
				background-color:gray;
			}
			
			.parent{
				position:relative;
				margin-left:50px;
				width:300px;
				height:300px;
				background-color:yellow;
			}
			
			.son1{
				position:absolute;
				left:150px;
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son1">son1</div>
			<div class="son2">son2</div>
		</div>
	</body>
</html>

图4-6

        说明：观察代码4-6可知class为parent的div的position属性的值为relative；

        代码4-7如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body{
				margin:0px;
				background-color:gray;
			}
			
			.parent{
				position:fixed;
				margin-left:50px;
				width:300px;
				height:300px;
				background-color:yellow;
			}
			
			.son1{
				position:absolute;
				left:150px;
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son1">son1</div>
			<div class="son2">son2</div>
		</div>
	</body>
</html>

图4-7
      说明：观察 代码4-7可知class为parent的div的position属性的值为fixed；

      总结：

        ①、对比图4-4、图4-5、图4-6和图4-7可以很轻易的得出这样一个结论：如果某一absolute作用的元素（比如：上面的son1）的父对象(或曾祖父，只要是父级对象（比如上面class为parent的div）)设置了position属性且position的属性值为absolute、relative或者fixed，那么这个子元素（比如：上面的son1）会参照离它（指子元素）最近的且position的属性值为absolute、relative或者fixed的父元素（比如上面class为parent的div）进行定位，可是以父元素哪个定位点来进行定位呢，答案是父元素的左上角（永远都是父元素的左上角，如果父元素样式中有padding也是这样，这一点可参考另一篇博客——《HTML CSS——position学习终结者(二)》）；如果子元素（比如：上面的son1）的所有父元素的position属性值不为absolute、relative或者fixed，那么该子元素将以body为定位对象进行定位，图4-4很好的演示了这一点（注意：单单就子元素而言图4-4和图4-3是一样的，它们参照定位对象都是body）；

        ②、由于将元素position属性设置为absolute后，会导致该元素脱离文档流，就像它不属于父对象一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的；

        五、fixed：fixed是特殊的absolute，position属性值为fixed的元素总是以body元素为定位对象（即按照浏览器的窗口进行定位）通过"left"、"top"、"right"或"bottom" 属性进行规定，即使拖动滚动条，该元素所在的位置也不会改变的（与background-attachment:fixed相似）。

        六、inherit：该属性作用的元素继承父元素position的属性值，由于该属性在任何的版本的 Internet Explorer （包括 IE8）都不支持，所以可以忽略它。

        【0分下载演示资源】

程序猿老高
关注
专栏目录
i.MX6ULL终结者Linux设备树DTS设备树语法结构
weixin_46635880的博客
11-21 1129
文章目录1 dtsi头文件2 设备节点信息3 设备节点及label的命名4 标准属性5 根节点compatible属性6 在设备节点中添加或修改内容 一般情况下，我们不会从头编写一个完整的dts文件，SOC厂商一般会直接提供一个有着基本框架的dts文件，当需要添加自己的板子设备树文件时，基于厂商提供的dts文件修改即可。所以我们要了解dts设备树文件的语法，这样我们才清楚如何添加我们自己的设备。 在本章节中，我们以topeet_emmc_4_3.dts设备树文件为例，来具体讲解一下dts文件的语法结构，如何
【面向对象】小游戏“终结者”程序的设计与实现
热门推荐
小魏的修行路
07-14 1万+
08年9月入学，12年7月毕业，结束了我在软件学院愉快丰富的大学生活。此系列是对四年专业课程学习的回顾，索引参见：http://blog.csdn.net/xiaowei_cqu/article/details/7747205 面向对象程序设计 这是我们学习程序设计的第一课。我也在这门课上第一次接触程语言、写代码。我们以影印版的《C++ Program Design : An Intr
CSS position 学习小结
SHENQIDETEDDY的博客
03-07 144
position的属性：static，relative，absolute，fixed，sticky，inherit position用来实现block element，最常见的就是div标签。 属性定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bo...
CSS:浅谈position属性(笔记)
得不到的永远是骚栋.
01-21 266
前言 这两天,在做进度条的时候,使用到position(定位)相关的知识点.主要是实现一个进度条效果,动画是使用move.js实现的(主要需要使用到动画结束回调方法),需要把进度条放在文字的下方,在此之前,只是了解过相关的Z-index属性可以实现的,对于CSS定位属性只是简单了解,并没有深入 ,在实现效果之后,这次做一下关于position属性的相关笔记,以备不时之需.需实现的效果如下图所示. position 属性 注: 本模块可查看W3School ,大部分选自W3School教程. posi
position:sticky；粘性布局
CodingNoob
12-06 2478
生效规则 position:sticky的生效是有一定的限制的，总结如下： 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。 设定为position:sticky元素...
position的定位
m0_60662967的博客
11-01 214
【代码】position的定位。
POSITION用法解释，POSITION是什么？
月光秦王
03-01 7659
POSITION是MFC模板类库中经常使用的一个数据类型，我们从它的定义可以看出，其实，它就是一个指针。 // abstract iteration position struct __POSITION { }; typedef __POSITION* POSITION; MFC给出的注释是：一个抽象的迭代位置，既然是抽象，也就是没有给定具体的数据类型，以满足不同的模板参数的需要。 在C
HTML CSS——position学习终结者(二).zip
06-15
在这个“HTML CSS——position学习终结者(二)”的资料中，我们预计将深入探讨`position`的各种用法和技巧。 首先，`position`属性用于定义元素在页面布局中的定位类型。它有四个主要值：`static`（默认值）、`...
i.MX6ULL终结者Linux 电容触摸屏实验Linux下电容触摸屏驱动框架
weixin_46635880的博客
01-16 392
文章目录1 多点触摸协议详解2 Type A 触摸点信息上报时序3 Type B触摸点信息上报时序4 MT其他事件的使用5 多点触摸使用到的API函数6 多点电容触摸驱动框架 1 多点触摸协议详解 在前面的裸板实验中，已经详细讲解过了电容触摸驱动的基本原理，根据前面的实验可以总结出电容触摸屏驱动其实就是一下几种 linux 驱动框架的组合： ① IIC 设备驱动，因为电容触摸 IC 基本都是 IIC 接口的，因此大框架就是 IIC 设备驱动。 ② 通过中断引脚(INT)向 linux 内核上报触摸信息，因此
FanChat学习笔记（五）——终结篇
Vicent_9920的博客
01-12 1101
上一篇讲了主界面，里面包含了个人动态、联系人列表、会话列表，没有阅读的话建议看看FanChat学习笔记（四）——主页面。本文接着说一说添加好友与聊天界面的逻辑及一些重要的知识点。 添加好友——AddFriendActivity用到的知识点 添加好友——AddFriendActivity界面逻辑 聊天——ChatActivity用到的知识点 聊天——ChatActivity界面逻辑
Position定位
xiomarazark的博客
06-07 193
前端必备知识：定位
理解position四大定位方式
zjnkkl的博客
09-09 496
理解position四大定位方式 absolute:位置设置为 absolute 的元素，可定位于相对于第一个已定位（非静态的）的包含它的元素的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及 “bottom” 属性来规定。 relative:位置被设置为 relative 的元素，可将其定位于相对于其正常位置的地方，因此 “left:20” 会将元素移至元素正常位置左边 20 个像素的位置。 position：relative position:absolute <!
position定位的基准问题
JiM-W 的博客
12-14 3282
position 以父元素内容区+padding 为定位基准 以自身整体 margin+ border + padding+ content 为基准
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位
douyh的专栏
08-13 418
本教程案例在线演示 有路网PC端 有路网移动端 免费配套视频教程 免费配套视频教程 教程配套源码资源 教程配套源码资源 定位 position属性 static：默认值，没有定位 relative：相对定位 absolute：绝对定位 fixed：固定定位 标准文档流 标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。 一般在HTML元素分为两种：块级元素和行内元素。像div,p这些的元素属于块级元素，块级元素是从上到下一行一行的排列；默认一个块级元素会占用一行，而跟在后面
专题 | position专题
A123ppleQueen的博客
11-05 227
position有5个值 static static
position属性
qq_36470686的博客
09-27 1476
position定位有4个属性，分别是static，absolute，relative，fixed 1.static(默认） static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）. 2.relative（相对定位） 此处的相对并不是相对于哪个父div或子div，相对只是相对于自身原本的位置发生变...
css中的定位学习（position）
m0_50553633的博客
09-24 348
定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下，只取其一（我们只会使用其中之一），top越大越向下移动，bottom越大越向上移动，定位元素水平方向的位置由left和right两个属性控制，通常情况下，只会使用其一，left 越大元素越靠右，right 越大元素越靠左。对于开启了定位的元素，可以通过z-index属性来指定元素的层级,z-index需要一个整数作为参数，值越大的元素层级越高,元素的层级越高越优先显示,当层级一样的时候会优先显示最下面的,
div标签别样的属性——tabindex
gaohuanjie的专栏
06-19 1万+
今天做开发遇到一个问题，经过努力还是解决了，这次然我认识了div中一个新的属性tabindex，下面结合例子谈一下该属性的作用：
网页制作,改变你的思维方式
gaohuanjie的专栏
05-15 8453
“重构”的春风吹遍大江南北，互联网一时间风声鹤唳，“div+CSS”俨然已成为一种“时尚”，难以尽数的网站都不约而同地开始了自己的“重构”。然而打开这形形色色网站的源代码，却时常令人哑然失笑—— 我们看到有嵌套6、7层的div布局，有不用table的表格，有纯div+a构成的页面，有成百上千的表现层class……现在关于标准的书籍越来越多，除了少数几本标榜“高级技巧”的书籍以外，很少有人不会
可学习的position embedding
最新发布
04-04
1. 基于嵌入层的位置编码（Embedding-Based Position Encoding）：这种方法使用一个可学习的位置嵌入层，将位置信息编码为向量。该嵌入层将位置信息转换为向量，然后将其与词嵌入向量相加，形成一个位置编码向量。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序猿老高

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值