CSS定位和浮动（吸顶、居中）

最新推荐文章于 2023-12-27 11:17:47 发布

月疯

最新推荐文章于 2023-12-27 11:17:47 发布

阅读量1.2k

点赞数

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119601678

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

理论知识：

场景一：
1、把要移动的元素拿来
2、放到哪个容器里面（参照物）
3、放到当前容器的具体位置（坐标）

场景二：
1、自身要脱离当前位置
2、坐在教室（参考物）
3、东南角（第几排）（坐标）

包含块（绝对定位的参考物）的设置方式：
给要做绝对定位的父元素（参考物），添加position：relative让其形成参考物

定位属性：position 设置或者检索元素的定位方式

属性值：
1、position：static（静态定位，默认值）

2、position：absolute（绝对定位）
a、若没有父元素，参考物为整个html文档
b、默认情况下参考物为已经做定位的父元素
c、添加绝对定位元素，会脱离整个布局流，不占据空间，破坏布局空间。
3、position：relative（相对定位）
a、参照物为自身的默认位置
b、占据空间
c、不会破坏布局流

4、position：fixed（固定定位）
参照物为浏览器窗口

拓展:
5、position：sticky（粘性定位）
特点：
position：relative和position：fixed的结合
当没触发滚动条的时候，执行的效果是position：relative；反而执行效果是position： fixed；

定位元素的层次关系：
z-index：数值
数值越大层次关系越给上层显示（支持负数）

定位属性：position 设置或者检索元素的定位方式

居中显示代码：

让一个元素在浏览器窗口左右上下居中：
1、position：fixed；
left：50%；
top：50%；
margin-left：-150px；
margin-top：-110px；

2、position：fixed；
left：0；right：0；
bottom：0；top：0；
margin：auto；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 300px;
				height: 220px;
				background: orange;
				position:fixed;
				left: 50%;
				top: 50%;
				margin-top: -110px;
				margin-left: -150px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>

关于粘性定位的小列子：（吸顶效果）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.topWarp{
				height: 80px;
				background: red;
			}
			.nav{
				width: 1000px;
				height: 60px;
				background: #000;
				margin: 0 auto;
				position: sticky;
				top: 0;
			}
			.content{
				height: 1500px;
				background: #ccc;
			}
		</style>
	</head>
	<body>
		<div class="topWarp">
			
		</div>
		<div class="nav">
			
		</div>
		<div class="content">
			
		</div>
	</body>
</html>

浮动：float：left、right、none

1、浮动不占据空间
2、如果多个元素横向排列，这些元素都要添加浮动
3、如果天剑浮动的子元素总宽超过父元素，最后一个元素会被挤下来
4、只要子元素有浮动，父元素一定要添加高度，否则会出现高度塌陷

注意：margin-（left、right、top、bottom）和left、right、top、bottom的区别？

1.直接在css中设置left、right、top、bottom生效的前提是必须设置父容器position:absolute或relative，如果不设置则会显示为最近一个定位的父对象相关的位置

2.设置margin-（left、right、top、bottom）则只会出现在父对象的相对位置，不考虑是否设置了position。