HTML-CSS(二十)CSS元素定位

最新推荐文章于 2024-03-31 15:49:11 发布

每天进步一大步

最新推荐文章于 2024-03-31 15:49:11 发布

阅读量180

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/weixin_44730244/article/details/116039514

版权

HTML 同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

CSS

65 篇文章 3 订阅

订阅专栏

position

概念

postion属性用于指定一个元素在文档中的定位方式，top、left、right、bottom属性则决定了该元素的最终位置

属性值

position:static 默认定位不脱离文档

position:absolute 绝对定位脱离文档

特性

使元素完全脱离文档流；
在这里插入图片描述
使内联元素支持宽高（让内联具备块特性）；

使块元素默认宽根据内容决定（让块具备内联特性）；

正常情况块元素默认宽度100%，但是因为position：absolute让块元素也具备了内联的特性
在这里插入图片描述
这个与浮动元素非常相似

如果有定位祖先元素，则相对于定位祖先元素发生偏移；如果没有定位祖先元素，则相对于整个文档发生偏离（绝对、相对、固定）

祖先元素有定位元素（绝对、相对、固定）
在这里插入图片描述
如果祖先元素没有定位元素，相对于整个浏览器

相对于上一层的除了static定位元素，一般会将想要相对于的元素设置relative（看下文），因为relative不会脱离文档。如果一直没有找到目标定位的元素，那么就会以浏览器窗口为主

position:relative 相对定位不脱离文档
如果没有定位偏移量，对元素本身没有任何影响；不是元素脱离文档流；不影响其它元素布局。left、top、right、bottom是相对于当前元素进行偏移的。top：0；left：0 就是自身的左上角，所以是相对于当前元素进行偏移
在这里插入图片描述
position:fixed 固定定位脱离文档
使元素完全脱离文档流

使内联元素支持宽高（让内联具备块特性）

使块元素默认宽度根据内容决定（让块具备内联特性）

相对于整个浏览器窗口进行偏移的，不受浏览器滚动条的影响

与position：absolute特性差不多相似，区别在下图
fixed不随滚动条发生变化
在这里插入图片描述
absolute随滚动条而滚动

fixed不会因为祖先元素有定位，而以该祖先进行定位

position:sticky 粘性定位脱离文档
在指定的位置，进行粘性操作。当元素设置里left/top/right/bottom值并且设置pistion：sticky之后，当元素滚动到指定的数值时就不再移动，并且固定在窗口处。
sticky与fixed的区别在于，fixed是一直不动，sticky是根据属性值进行移动到一定位置之后才不在移动。
在这里插入图片描述
sticky失效原因
1.父元素不能出现overflow：hidden或者overflow：auto属性

2.父元素的高度不能和sticky高度一样
父元素靠子元素自然撑开，自然高度就会等同于子元素，因此sticky也失效了

z-index定位层级

默认层级为0，值可以正、负数和零

正常情况下：后面写的样式优先级较高，所以blue压在yellow上。默认z-index：0
在这里插入图片描述
通过z-index：1能够将yellow放在blue上面

嵌套时候的层级问题

当不是同级之间的比较时，即使子元素的z-index再高，如果父元素的z-index低于另一个父元素的z-index，那么也会被压在底部
在这里插入图片描述
做一个小练习试一试把：
源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
			}
			.box{
				border: 1px solid #FFC0CB;
				width: 600px;
				height: 600px;
				position: relative;  /* absolute相对于上一级的relative*/
			}
			.pointL{
				width: 80px;
				height: 80px;
				border-radius: 40px;   /* 形成圆角 圆角半径=宽度一半时 刚好就是一个圆*/
				background-color: pink;
				text-align: center;
				line-height: 80px;
				position: absolute; 
				left: 65px;  /* 距离上最近的relative定位元素而言，距离他的最左侧距离*/
				top: 257px;   /* 距离上最近的relative定位元素而言，距离他的顶部距离*/
			}
			.pointR{
				width: 80px;
				height: 80px;
				border-radius: 40px;
				background-color: pink;
				text-align: center;
				line-height: 80px;
				position: absolute;
				left: 358px;
				top: 202px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="../img/可爱二.jpg" >
			<div class="position">
				<div class="pointL">
					<span>超级</span>
				</div>
				<div class="pointR">
					<span>可爱</span>
				</div>
			</div>
		</div>
	</body>
</html>

原图：
在这里插入图片描述
效果图：

练习二（：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#menu{
				border: 1px solid #000000;
				background-color: #00FFFF;
				position: fixed;
				left: 200px;
				width: 200px;
			}
			#txt{
				background-color: yellow;
			}
			#menu:hover ul{
				display: block;
			}
			ul{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<p>卖家菜单</p>
			<ul id="ul">
				<li>123</li>
				<li>123</li>
				<li>123</li>
				<li>123</li>
			</ul>
		</div>
		<div id="txt">
			猪肉青菜馅饺子真的好好吃！！！！隔~猪肉青菜馅饺子真的好好吃！！！！隔
		</div>
	</body>
</html>