一篇文章轻松拿下CSS常用定位方式

最新推荐文章于 2022-10-15 14:29:12 发布

专业bug开发

最新推荐文章于 2022-10-15 14:29:12 发布

阅读量772

点赞数 2

分类专栏：前端学习文章标签： css html 前端

本文链接：https://blog.csdn.net/k1507157/article/details/122286933

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

相信大家对于CSS并不陌生。无论我们是在写web、写小程序、写java web,都会使用到CSS对页面样式进行排布。今天我就带领大家系统的学习一下CSS几种常见的布局方式，相信搞定了这几种布局方式以后你就不会再因为页面布局问题而发愁了，一起来看看吧~

常用定位方式

在CSS里面我们经常使用的定位方式包括以下几种：relative（相对定位）、absolute（绝对定位）、static（无定位）、fixed（固定）。详细的介绍可以参考定位方式参考！！

相对定位（relative)

简介

相对定位的参考偏移元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留。

使用方法

position: relative;  /* 设置定位方式为相对定位 */
left: 20px;
top: 20px;

使用示例

<div class="main">
	<div class="div1"></div>
	我是大学生！我学习的是计算机，现在是2022年1月3日14:21:33，我正在学习css的定位方式。
	我看课的时候是1.5倍速的，所以看的比较快！但是这部分内容比较简单，所以这样没什么问题。
</div>

.main{
	width: 600px;
	height: 600px;
	background-color: #00FFFF;
}

.div1{
	width: 200px;
	height: 200px;
	background-color: #FF0000;
	/* 设置定位方式为相对定位 */
	position: relative;
	top: 20px;
	left: 40px;
}

请添加图片描述

综合使用

这里我们直接在body容器内部放置三个div容器，假如这三个div容器是一个整体比如这三个容器是一个表单），我们使用相对定位让整体往右移动。
请添加图片描述

绝对定位（absolute）

简介

相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就现对于最初的包含块(如body)。

使用方法

position: absolute;

使用示例

.main{
	width: 600px;
	height: 600px;
	background-color: #00FFFF;
}

.div1{
	width: 200px;
	height: 200px;
	background-color: #FF0000;
	/* 设置定位方式为绝对定位 */
	/* 如果我们不给position的属性，那么top等属性将不会生效*/
	position: absolute;
	top: 20px;
	left: 40px;
}

请添加图片描述

综合使用

这里我们结合一个案例来深入的了解一下绝对定位方式的使用。这里我们直接在body容器内部放置三个div容器，假如这三个div容器是一个整体，我们需要它是一个整体（比如这三个容器是一个表单），按照绝对定位的方式进行定位。请添加图片描述

固定定位（fixed）

简介

固定定位是指相对于浏览器窗口的定位方式。

使用方法

position: fixed;  /*设置固定定位*/

使用示例

<body>
		<div class="div1">我爱学习</div>
		<div class="div2">
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
			<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
		</div>
		<div class="div3">我爱学习</div>
	</body>

.div1{
	width: 5%;
	height: 100px;
	/*设置定位方式为固定定位*/
	position: fixed;
	top: 200px;
	left: 10px;
	background-color: yellow;
}

.div2{
	width: 80%;
}

.div3{
	width: 5%;
	height: 100px;
	position: fixed;
	top: 200px;
	right: 10px;
	background-color: yellow;
	
}

请添加图片描述

相对与绝对比较

上面我们使用绝对和相对调整三个div的综合案例的时候都是对单个元素进行操作，在实际的生产环境下我们显然不能这么做，所以我们需要给三个div元素添加一个父级元素，通过设置父级元素的定位方式达到我们的需求。

	<body>
		<div class="div0">
			<div class="div1"></div>
			<div class="div2"></div>
			<div class="div3"></div>
		</div>
	</body>

div {
	width: 100px;
	height: 100px;
}

.div1 {
	background-color: #0000FF;
}

.div2 {
	background-color: #FF0000;
}

.div3 {
	background-color: #FFFF00;
}

/* 采用相对定位的方式设置页面样式 */
.div0{
	position: relative;
	left: 200px;
}

/* 采用绝对定位的方式设置页面样式 */
/* .div0{
	position: absolute;
	left: 200px;
} */

这时候我们会发现对于div0来说无论是相对定位还是绝对定位，我们最终实现的的效果都是一样的，但是仔细想想你会发现其实并不一样。

定位方式	不同
相对定位	1.参照物为自己 2.不破坏原有的文档流
绝对定位	1.参照物为相对于最近的一级父级元素 2.破坏原有的文档流

请添加图片描述

定位与浮动

绝对定位与浮动

绝对定位时产生的浮动与通过float设置的浮动有所不同，简言之，绝对定位产生的浮动，后续元素会忽略浮动元素的位置，效果如下图所示。请添加图片描述

相对定位与浮动

浮动可以使我们的元素脱离文档流，相对定位可以通过top、left设置元素位置，两者结合可以有效设置元素布局。

.div0{
	/* 设置相对布局是为了使用top等改变元素位置 */
	position: relative;
	float: left;
	top: 50px;
}

请添加图片描述

浮动层级问题

通过前面的元素定位方式的设定以及产生的浮动，我们会发现下面这个现象。
请添加图片描述
我们可以清楚的看到所有的div元素都是按照先后顺序依次排列的，如果我们要对元素的层级进行设置，可以使用z-index。文档地址
z-index的数值越大层级越往上，数值上不封顶。

定位综合案例

接下来我们使用刚才学习的定位方式完成下面这个布局。
请添加图片描述

定位思路
编码实现

	<body>
		<div class="div0">
			<div class="div1">
				<div class="div2">6</div>
				<img class="img1" src="imgs/购物车.png"/>
			</div>
		</div>
	</body>

.div0{
	height: 300px;
	width: 500px;
	position: relative;
	background-color: #667766;
}

.div1{
	position: absolute;
	width: 300px;
	height: 200px;
	background-color: red;
	top: 50px;
	left: 100px;
}

.div2{
	width: 30px;
	height: 30px;
	background-color: blue;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	color: white;
	top: -10px;
	left: -10px;
	/* 必须设置布局方式上面的top才能生效 */
	position: absolute;
}

.img1{
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 10px;
	right: 30px;
}

最终效果

总结

通过上面的例子我们基本对于页面定位有了更进一步的认识，无论是绝对定位还是相对定位，我们在必要的时候对两者进行组合使用，达到页面布局的效果。

专业bug开发

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
一篇文章轻松拿下CSS常用定位方式

前言相信大家对于CSS并不陌生。无论我们是在写web、写小程序、写java web,都会使用到CSS对页面样式进行排布。今天我就带领大家系统的学习一下CSS几种常见的布局方式，相信搞定了这几种布局方式以后你就不会再因为页面布局问题而发愁了，一起来看看吧~常用定位方式在CSS里面我们经常使用的定位方式包括以下几种：relative（相对定位）、absolute（绝对定位）、static（无定位）、fixed（固定）。详细的介绍可以参考定位方式参考！！相对布局（relative)布局简介
复制链接

扫一扫

专栏目录