CSS定位position属性

最新推荐文章于 2024-01-30 11:32:00 发布
最新推荐文章于 2024-01-30 11:32:00 发布
阅读量184 收藏
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48468380/article/details/112155421
版权

static 静态定位/常规定位/自然定位（默认的定位）

作用

使元素定位于常规/自然流中（块、行垂直排列下去、行内水平从左到右）

特点

  1. 忽略top，bottom，left，right，或者z-index声明
  2. 两个相邻的元素如果都设置了外边距，那么最终外边距=两者中外边距最大的
  3. 具有固定width和height值的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中

代码示例

忽略top、bottom等声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自然定位</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.static{
				position: static;
				width: 200px;
				height: 200px;
				text-align: center;
				border: red 10px solid;
			}
			.static:ntn-child(2){
				top:20px;
			}
		</style>
	</head>
	<body>
		<div class="static" >1</div>
		<div class="static">2</div>
		<div class="static">3</div>
		<div class="static">4</div>
	</body>
</html>

效果，第二个div标签top声明无效
在这里插入图片描述

两个相邻元素同时设置外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自然定位</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.static{
				position: static;
				width: 200px;
				height: 200px;
				text-align: center;
				border: red 10px solid;
				line-height: 50px;
				box-sizing: border-box;
			}
			.static:nth-child(1){
				margin: 30px;
			}
			.static:nth-child(2){
				margin: 60px;
			}
		</style>
	</head>
	<body>
		<div class="static">1</div>
		<div class="static">2</div>
		<div class="static">3</div>
		<div class="static">4</div>
	</body>
</html>

效果，第一块和第二块的间距为第二块的外边距值60px
在这里插入图片描述

元素水平居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自然定位</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.static{
				position: static;
				width: 200px;
				height: 200px;
				text-align: center;
				border: red 10px solid;
				line-height: 50px;
				box-sizing: border-box;
			}
			.static:nth-child(1){
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="static">1</div>
		<div class="static">2</div>
		<div class="static">3</div>
		<div class="static">4</div>
	</body>
</html>

效果，第一个div元素外边距设置auto，得到水平居中
在这里插入图片描述

relative 相对定位

作用

使元素成为containing-block-，即可定位的祖先元素（其他元素用作定位的参照物）

特点

  1. 可以使用top、right、bottom、left、z-index进行相对定位
  2. 相对定位的元素不会离开常规流
  3. 任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位
  4. 可以使浮动元素发生偏移，并控制它们的堆叠顺序

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.block{
				width: 200px;
				height: 200px;
				position: static;
				border: red 10px solid;
				
			}
			.block:nth-child(2){
				position: relative;
				top: 50px;
				border: blue 10px solid;
				z-index: -1;
			}
		</style>
	</head>
	<body>
		<div class="block">
			1
		</div>
		<div class="block">
			2
		</div>
		<div class="block">
			3
		</div>
		<div class="block">
			4
		</div>
	</body>
</html>

效果，第二个元素根据top发生偏移，且根据z-index改变了堆叠顺序，但原来常规流中的空间不会被填补，即元素不会脱离常规流
在这里插入图片描述

absolute 绝对定位

作用

使元素脱离常规流

特点

  1. 脱离常规流
  2. 设置尺寸要注意：百分比比的是谁？——最近定位祖先元素
  3. left/right/top/bottom若设置为0，它将对齐到最近定位祖先元素的各边
  4. left/right/top/bottom若设置为auto，它将恢复到常规流
  5. 如果没有最近定位祖先元素，会认< body >作为祖先元素
  6. z-index可以控制堆叠顺序

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.block{
				width: 200px;
				height: 200px;
				
				border: #FF0000 10px solid;
			}
			.block:nth-child(2){
				position: absolute;
				right: 0;
				bottom: 0;
				width: 20%;
			}
		</style>
	</head>
	<body>
		<div class="block">
			1
		</div>
		<div class="block">
			2
		</div>
		<div class="block">
			3
		</div>
		<div class="block">
			4
		</div>
	</body>
</html>

效果，第二个元素right与bottom设置为0，则与祖先元素右下两边对齐，此时祖先元素是body，所以在右下角，宽度为20%，即body的20%，绝对定位脱离了常规流，原空间被清除
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.block{
				width: 200px;
				height: 200px;
				
				border: #FF0000 10px solid;
				box-sizing: border-box;
				position: relative;
			}
			.child{
				position: absolute;
				width: 50%;
				height: 50%;
				border: #0000FF 5px solid;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto auto;
			}
			/* .block:nth-child(2){
				position: absolute;
				right: 0;
				bottom: 0;
				width: 20%;
			} */
		</style>
	</head>
	<body>
		<div class="block">
			1
		</div>
		<div class="block">
			<div class="child">
				2
			</div>
		</div>
		<div class="block">
			3
		</div>
		<div class="block">
			4
		</div>
	</body>
</html>

效果，此时红边框div元素定位为relative，则它会变成附近的绝对定位的祖先元素，将left/right/top/bottom均设置为0且margin设置为auto时，外边距填充满空白区域从而实现内容居中
在这里插入图片描述

fixed 固定定位

作用

使元素脱离常规流

特点

  1. 具有绝对定位的特点
  2. 与绝对定位区别在于参照物不同，绝对定位以祖先元素作为参照物，固定定位以视口作为参照物
  3. 固定定位元素不会随着视口的滚动而滚动

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定定位</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body{
				height: 1800px;
			}
			.block{
				width: 200px;
				height: 200px;
			}
			.block:nth-child(1){
				position: absolute;
				top: 20px;
				left: 20px;
				background-color: #0000FF;
			}
			.block:nth-child(2){
				position: fixed;
				top: 20px;
				left: 20px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="block">
			固定
		</div>
		<div class="block">
			绝对
		</div>
	</body>
</html>

效果，滚动条下拉但元素不会改变在视口中的位置
在这里插入图片描述
在这里插入图片描述

sticky 磁贴定位/粘性定位/吸附定位（CSS3新加）

作用

relative和fixed的完美结合，制造吸附效果

特点

  1. 如果产生偏移，原位置还是会在常规流中空出
  2. 如果它的最近祖先元素有滚动条，那么他的偏移标尺就是最近的祖先元素
  3. 如果最近祖先元素没有滚动，那么他的偏移标尺就是视口
  4. 上下左右的偏移规则

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>磁贴定位</title>
		<style>
			.parent{
				position: relative;
				width: auto;
				height: 500px;
				background-color: antiquewhite;
				overflow: scroll;
			}
			.child{
				position: sticky;
				width: auto;
				height: 100px;
				margin-top: 20px;
				top: 0;
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">
				吸附
			</div>
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
	</body>
</html>

效果，当元素根据top值捕捉到祖先元素时贴住祖先元素
在这里插入图片描述
在这里插入图片描述

inherit 继承定位

作用

继承父元素的定位属性

补充知识点

box-sizing 的使用

作用

允许以特定方式定义匹配某个区域的特定元素

属性值

  1. content-box：在宽度和高度之外绘制内边距和边框
  2. border-box：通过从已经设定的宽度和高度分别减去边框和内边距之后得到的值，才是内容的宽度和高度
  3. inherit：从父元素继承box-sizing的值

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>box-sizing</title>
		<style>
			.border-box{
				box-sizing: border-box;
				background-color: antiquewhite;
				width: 80px;
				height: 80px;
				border: red 1px solid;
				padding: 20px;
			}
			.content-box{
				box-sizing: content-box;
				background-color: antiquewhite;
				width: 80px;
				height: 80px;
				border: red 1px solid;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div class="border-box">
			border-box
		</div>
		<br>
		<div class="content-box">
			content-box
		</div>
	</body>
</html>

效果，border-box设置的宽高包含了内边距，增加内边距时会先占据盒子内容的空间，content-box设置的宽高仅为盒子内容的宽高，不包含内边距，增加内边距时会直接以盒子内容为界向外扩张
在这里插入图片描述

nth-child(n) 选择器

作用

匹配属于其父元素的第n个子元素，不论元素类型，其中n可以是数字、关键字、公式

z-index 属性

作用

设置元素的堆叠顺序，拥有更高堆叠顺序的总是位于拥有较低堆叠顺序的元素的前面

z-index可以有负值
z-index只能在具有position定位的元素上使用

属性值

  1. auto：默认，顺序与父元素相等
  2. inherit：继承父元素的z-index值
  3. number：数值越大离用户越近
老蛙@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3定位
weixin_68485297的博客
04-08 736
一、定位 使用 position属性在文档中的实现定位。并通过属性值top、left、right和bottom来决定该元素的位置。 语法：position：static | relative | fixed | absolute | sticky；top：0px；left：0px； 1、static 静态定位 该属性值没有定位， 以标准流方式显示（它将忽略top、bottom、left、right、z-index声明） 2、absolute 绝对定位 生成绝对定位的元素，相对自身原来的位
css3定位属性：position
weixin_43294750的博客
03-19 488
css定位属性 position 取值：static，relative，absolute，fixed，sticky 默认值：static 继承性：无 static：对象遵循常规流。此时4个定位偏移属性不会被应用,同时设置z-index属性也是无效的。 <!doctype html> <html> <head> <meta charset="utf-8"...
CSS3中各种定位属性
qq_46591632的博客
03-22 434
定位:position static 默认值,设置坐标无效 absolute 绝对定位 特征: 1:脱离文档流,不占位置 2: 默认参考html的00点(浏览器零点) 3: 如果有父级,且父级有定位,那就参考父级元素(默认定位除外) 相当于给子元素指定了参考物 坐标位置 ： 水平 left right 垂直top bottom relative: 相对定位 特征: 1: 占据文...
css定位属性
weixin_48180273的博客
01-28 4862
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 一、position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。 static relative fixed absolute 1.相对定位：relative 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调），它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。而且不脱出文档流，还占据着位置。 d
简明CSS定位属性position
09-25
POSITION属性用来决定元素在页面上的位置，其定位属性有多个，下面一一为大家介绍下，希望大家在使用过程中可以用到
图解CSS中position属性的定位用法
09-24
总的来说，`position`属性是CSS布局中的核心部分，理解和熟练运用相对定位、绝对定位以及其他定位方式，对于创建复杂的网页布局至关重要。开发者应根据实际需求灵活选择不同的定位策略，以实现理想的页面布局效果。
CSS background-position 属性 定位图片
09-25
CSS background-position 属性定位图片 在 CSS 中，background-position 属性是设置背景图像的起始位置的属性。今天，我们来讨论这个属性的定义、用法和效果。 定义 background-position 属性设置背景图像的起始...
CSS教程 CSS定位属性
09-25
CSS定位属性是网页布局设计的关键，它允许开发者精确控制元素在页面上的位置，从而实现复杂的网页布局。在CSS中，有三种主要的定位机制：普通流、浮动和绝对定位。 普通流是元素默认的布局方式，块级元素从上到下...
【CSS3】定位样式之position属性
茨时代べ 的博客
11-11 315
语法格式 position:static|absolute|fixed|relative; 先上图 <style> body{ margin: 0; padding: 0; } .one{ width: 200px; height: 200px; border: solid 1px red; } .two{ ...
css定位属性和背景属性
ch206265的博客
03-11 721
一、定位属性 定位属性position的属性值有：static/relative/absolute/fixed，其默认值为static。我感觉，关于这些定位，需要考虑两个问题：第一个，定位是否破坏了常规文档流；第二个，定位的参考系是谁。下面从这两个角度分析一下静态、相对、绝对和固定定位。 1. 静态定位 静态定位static是position属性的默认值，正常情况下采用的都是静态定位。因此常规...
html设置位置的属性有哪些,position属性 css中定位position有哪几个属性值
weixin_35947806的博客
06-05 1111
position其实就是用来设定元素的定位类型，在使用过程当中一共有四个常见的属性值，分别是static，relative，absolute，fixed，这四种属性究竟有哪些特点呢?接下来我们就一起来好好的了解一下吧。position属性——css中定位position有哪几个属性值1、static，默认值说到这里我们不得不提一下一个定义——文档流，很多书对文档流这个概念只是一笔带过，没有详细解答...
CSS学习笔记七——定位属性
weixin_43328954的博客
01-29 955
定位属性 position 属性是定位属性，可让某个元素显示在某个位置。 其取值有：static、absolute、relative、fixed 和 sticky。 1. static 静态定位（默认值） 按照文档流顺序，从左到右、从上到下，与元素显示类型有关； 不支持 top、left、right、bottom； 2. relative 相对定位 相对自己原来的位置移动； 不脱离文档流，仍然占据文档流位置，下一元素不会顶上来； 可以覆盖在其它元素上；
前端开发-CSS快速掌握上手知识详细总结
weixin_45168167的博客
11-22 4878
01_CSS基础 前言 最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wsmkKve6-1637594225448)(images01_base/wps1.jpg)] HTML:结构层,Hyper Text Markup Language,超文本标记语言 CSS:表现层,Cascading Style Sheets，层叠样式表 JS:行为层,JavaScript，客户端脚本语言 **网页的结构层（stru
CSS中的定位(position)详解
weixin_52079958的博客
07-29 2404
将学过的定位进行一个简单的整理，方便以后查阅，也想向大家分享一下。 众所周知，定位分为5种，分别为：静态定位、相对定位、绝对定位、固定定位、粘性定位。下面我为大家详细介绍一下每种定位。 1.静态定位(static)： 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。 静态定位 按照标准流特性摆放位置，它没有边偏移。 静态定位在布局时我们几乎不用的 图片解释： 2.相对定位(relative)： 相...
css之旅（三）css position属性
letianxf的博客
07-14 186
本文主要介绍css属性position各个属性值得区别。 属性值 描述 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位
position sticky VS positon fixed， width:100% VS width:auto
最新发布
程序媛的梦工厂
01-30 352
所以，在开发中尽量还是选择 width:auto ,因为当从边距、填充或边框添加额外空间时，它将尽可能努力保持元素与其父容器的宽度相同。而width：100%将使元素与父容器一样宽。额外的间距将添加到元素的大小，而不考虑父元素。
纯css position:sticky 实现表格首行和首列固定
jinse29的博客
12-21 1740
目录 1.认识position:sticky 2.position:sticky小栗子-实现表格首行和首列固定 2.1 效果图 2.2 代码 1.认识position:sticky 我们先来了解一个css属性，position:sticky，粘性布局，粘性布局，下面是MDN的介绍 课代表划重点：粘性布局是relation和fixed的结合，必须与top、right、bottom、left的任一属性配合使用才可以。 看到这里。感觉功能很强大吧，巴特，然后浏览器的兼容性不是很好。不过..
reflow和repaint的触发场景
小菜菜菜菜菜菜的博客
02-26 637
体现：repaint是某个DOM元素进行重绘；reflow是整个页面进行重排（回流），也就是页面所有DOM元素渲染。如何触发：style变动造成repaint和reflow。不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、...
前端笔试题总结-HTML&CSS
DxCaesar的博客
07-16 596
HTML&CSS专项 web页面级优化： 减少HTTP请求次数； 进行资源合拼并压缩； Inline images； 将外部脚本置于底部； 减少不必要的HTTP跳转。 CSS3新增属性： CSS3新增属性用法整理 CSS高级选择器： css选择器参考手册-w3school a,b可以是标签选择器、类选择器或id选择器。 后代选择器： a b{} 空格分隔，选择a的后代中的所有b元素； 子代选择器： a>b{} >分隔，选择a的直系子代b元素； 并集选择器： a,b{
css定位position
07-28
CSS中的position属性用于控制元素的定位方式。根据引用\[1\]和引用\[2\]，position属性有五个值：static、relative、absolute、fixed和sticky。 - static：元素按照正常的文档流进行布局，不会受到position属性的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值