定位进阶(HTML)

最新推荐文章于 2023-03-26 01:44:00 发布

import java.lx

最新推荐文章于 2023-03-26 01:44:00 发布

阅读量1.3k

点赞数 4

文章标签： html 前端 javascript 学习

本文链接：https://blog.csdn.net/qq_51810428/article/details/126833678

版权

本文详细介绍了CSS中的定位技术，包括相对定位、绝对定位和固定定位。相对定位是相对于元素自身原来的位置进行偏移，不脱离文档流；绝对定位以最近的已定位祖先元素为基准，脱离文档流；固定定位则相对于浏览器窗口定位，不随滚动条移动。此外，还提到了z-index属性用于调整元素的堆叠顺序。这些定位技术常用于网页布局和交互设计中。

摘要由CSDN通过智能技术生成

定位

定位指的就是将指定的元素摆放到页面的任意位置通过定位可以任意的摆放元素,是更高级的布局手段

通过position属性来设置元素的定位

属性值	说明
static	默认值，没有定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

偏移量

偏移量是开启元素定位相对基准偏移的度量

当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动

left：元素向右偏移量

right：元素向左偏移量

top：元素向下偏移量

bottom：元素向上偏移量

偏移量可设正值，也可设负值

通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

相对定位

相对定位是相对自身原来位置进行偏移，此时position属性是relative

规律：

1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）

3.相对定位的元素不会脱离文档流，对父级元素和相邻元素没有任何影响

4.相对定位会使元素提升一个层级

5.相对定位不会改变元素的性质，块还是块，内联还是内联

6.相对定位的元素会相对它原来的位置，通过指定偏移，到达新的位置

7.相对定位的元素原来的位置会被保留下来

特性：

相对于自己的初始位置来定位

元素位置发生偏移后，它原来的位置会被保留下来

层级提高，可以把标准文档流中的元素及浮动元素盖在下边

使用场景：

相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				width: 300px;
				height: 100px;
				background-color: #ccc;
				position: relative;
				left: 100px;
				top: 100px;
			}
			
			p{
				width: 500px;
				height: 200px;
				background-color: #f00;
			}
		</style>
	</head>
	<body>
		<div></div>
		<p></p>
	</body>
</html>

相对定位：

绝对定位

绝对定位是使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移，此时position属性值是absolute

如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响元素位置发生偏移后，它原来的位置不会被保留下来

规律：

1.开启绝对定位，会使元素脱离文档流

2.绝对定位会改变元素的性质，不在区分块还是行内，更类似行内块元素

3.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

4.绝对定位会使元素提升一个层级

5.绝对定位是相对于离他最近的包含块定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）

特性：

绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位

元素位置发生偏移后，原来的位置不会被保留

层级提高，可以把标准文档流中的元素及浮动元素盖在下边

设置绝对定位的元素脱离文档流

使用场景：

一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father{
				width: 500px;
				height: 300px;
				background-color: #ccc;
				margin: 10px auto;
				/* 子绝父相：父元素设置相对定位，但是不设置偏移量，目的是给子元素作为定位的参照 */
				position: relative;
				
			}
			
			.son1{
				width: 300px;
				height: 100px;
				background-color: #f00;
				position: absolute;
				left: 100px;
			}
			
			.son2{
				width: 300px;
				height: 150px;
				background-color: #00f;
				
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
	</body>
</html>

绝对定位：

固定定位

固定定位类似决定定位，区别在于定位的基准是浏览器窗口,此时position的属性是fixed

规律：

1.用于固定在浏览器页面上，不随浏览器的滚动而改变位置

2.以浏览器为参照物，和父元素没有任何关系

3.固定定位不占有原来的位置，即脱离标准流 ,改变元素的性质

特性：

相对浏览器窗口来定位

偏移量不会随滚动条的移动而移动

使用场景：

一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				height: 1200px;
			}

			div:nth-of-type(1) {
				/*第一个div设置绝对定位*/
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				right: 0;
				bottom: 0;
			}

			div:nth-of-type(2) {
				/*第二个div设置固定定位*/
				width: 50px;
				height: 50px;
				background: yellow;
				position: fixed;
				right: 10px;
				bottom: 30px;
			}
		</style>
	</head>
	<body>
		<a href="#" name="top">hello</a>
		<div></div>
		<div>
			<a href="#top">回到<br />顶部</a>
		</div>
	</body>
</html>

z-index属性

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

如果定位元素的层级是一样，则下边的元素会盖住上边的，通过z-index属性可以用来设置元素的层级

可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级

层级越高，越优先显示

对于没有开启定位的元素不能使用z-index

网页中的元素都含有两个堆叠层级

未设置绝对定位时所处的环境，z-index是0

设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定

改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 100px;
			}
			
			div:nth-of-type(1){
				background-color: #ccc;
				position: relative;
				top: 30px;
				left: 50px;
				z-index:999;
			}
			
			div:nth-of-type(2){
				background-color: #f00;
				position: relative;
				bottom: 60px;
				left: 60px;
				z-index: 2;
			}
			
			
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
	</body>
</html>