css的定位

最新推荐文章于 2024-04-02 00:56:58 发布

加油，铁子！

最新推荐文章于 2024-04-02 00:56:58 发布

阅读量84

点赞数 1

分类专栏： web前端文章标签： css html5 前端

本文链接：https://blog.csdn.net/weixin_51264427/article/details/119270765

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

相对定位

如何设置相对定位？

相对定位： position: relative;
定位位置：相对于元素的初始位置
特点：定位后，原来的位置会保留，不会影响其他元素布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.one{
				width: 200px;
				height: 200px;
				background-color: #AAFFFF;
				/* 
				相对定位  定位最好写位置
				定位位置：相对于元素的初始位置
				定位后，原来的位置会保留，不会影响其他元素布局
				*/
				position: relative;
				/* 设置定位位置 */
				/* left: 200px; */
				/* right: 200px; */
				/* top: 200px; */
				bottom: 200px;
			}
			.two{
				width: 100px;
				height: 100px;
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
	</body>
</html>

绝对定位

绝对定位： position: absolute;
定位后原来的位置会被其他元素占用
影响其他元素布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				background-color: #AAFFFF;
				/* 绝对定位 
				 定位后 原来的位置会被其他元素占用 
				 影响其他元素布局
				*/
				position: absolute;
				/* 设置定位的位置 
				定位位置相对于body
				*/
			   left: 0px;
			   top: 0px;
				/* left: 100px;
				top: 200px; */
			    /*right: 100px;
				bottom: 100px; */
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box1"></div>
	</body>
</html>

绝对定位的参照物

定位位置相对于拥有定位的外层元素
如果外层元素没有定位则定位位置相对与body

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background-color: #AAFFFF;
				/* 绝对定位 
				 定位后 原来的位置会被其他元素占用 
				 影响其他元素布局
				*/
				position: absolute;
				/* 设置定位的位置 
				定位位置相对于拥有定位的外层元素
				如果外层元素没有定位 则定位位置相对与body
				*/
			   right: 10px;
			   bottom: 10px;
				
			}
			.big{
				width: 300px;
				height: 300px;
				background-color: coral;
				/* position: relative; */
			}
			.out{
				width: 500px;
				height: 500px;
				background-color: #AAFFFF;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="big">
				<div class="box"></div>
			</div>
		</div>
	</body>
</html>

绝对定位和相对定位的配合使用

使用场景

一个元素盖在另一个元素上面

如何使用

上面的元素使用absolute，父元素使用relative

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: 4px solid #00FFFF;
				width: 300px;
				position: relative;
			}
			div img{
				width: 300px;
				/* 除去白条 */
				vertical-align: middle;
			}
			div span{
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../img/1.jpg" />
			<span>更新到第10集</span>
		</div>
	</body>
</html>

固定定位

定位位置：相对于游览器可视窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #AAFFFF;
				/* 固定定位 */
				position: fixed;
				/* 定位位置 
				相对于游览器可视窗口
				*/
				right: 100px;
				bottom: 100px;
			}
		</style>
	</head>
	<body style="height: 2000px;">
		<h1>Hello</h1>
		<div>
			<a href="#">返回顶部</a>
		</div>
	</body>
</html>

层级

同时定位在一个位置的元素文档后面的层级高（在上面）

设置层级

z-index值越大层级越高
不设置层级默认小于1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.one{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				/* 设置层级 z-index值越大层级越高
				不设置层级默认小于1
				*/
				z-index: 1;
			}
			.two{
				width: 100px;
				height: 100px;
				background-color: #FF7F50;
			}
			div{
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<!-- 同时定位在一个位置的元素 文档后面的层级高（在上面） -->
		<div class="one"></div>
		<div class="two"></div>
	</body>
</html>

居中问题

垂直居中

单行文本垂直居中：
给父元素设置line-height:父元素高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				/* 块属性元素水平居中 
				 给自己设置margin: 0 auto;
				 */
				margin: 0 auto;
				/* 其他属性元素水平居中 
				给父元素设置 text-align: center;
				*/
				text-align: center;
				
				/* 单行文本垂直居中
				给父元素设置line-height:父元素高度 */
				line-height: 100px;
			}
		</style>
	</head> 
	<body>
		<!-- 水平居中 -->
		<div>
			<span>hello</span>
		</div>
	</body>
</html>

水平居中

块属性元素水平居中：

给自己设置margin: 0 auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				/* 块属性元素水平居中 
				 给自己设置margin: 0 auto;
				 */
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 水平居中 -->
		<!-- 块属性标签 -->
		<div>
			<span>hello</span>
		</div>
	</body>
</html>

其他属性元素水平居中：

给父元素设置 text-align: center;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				/* 块属性元素水平居中 
				 给自己设置margin: 0 auto;
				 */
				margin: 0 auto;
				/* 其他属性元素水平居中 
				给父元素设置 text-align: center;
				*/
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- 水平居中 -->
		<!-- 块属性标签 -->
		<div>
			<span>hello</span>
		</div>
	</body>
</html>