8.CSS基础_定位（position）

橘九。

于 2019-10-18 10:46:43 发布

阅读量124

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/qq_34400745/article/details/102619922

版权

CSS基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这一节我们来看一下定位，CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为：

静态定位，
相对定位，
绝对定位，
固定定位

这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。

1、静态定位（static）

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。
先定义三个div不进行任何位置定义：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位方式</title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				background: #6DA5FF;
			}
			.box1{
				width: 200px;
				height: 200px;
				background:yellowgreen;
			}
			.box2{
				width: 200px;
				height: 200px;
				background: grey;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			python
		</div>
		<div class="box1">
			java
		</div>
		<div class="box2">
			php
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

2、相对定位（relative）

会占用该元素在文档中初始的页面空间，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
在这里插入图片描述

我们修改一下div2的相对定位：

.box1{
				width: 200px;
				height: 200px;
				background:yellowgreen;
				position: relative;
				left: 30px;
				top: 50px;
			}

运行结果：

在这里插入图片描述
运行结果发现，相对定位的div1还是会占用初始空间，并相对原始位置进行相对移动；

3.绝对定位（absolute）：

绝对定位和文档流无关不占据空间：可以覆盖其余元素；
这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。也就是会向上查找上一个绝对定位的，如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。

.box1{
				width: 200px;
				height: 200px;
				background:yellowgreen;
				position: absolute;
				left: 30px;
				top: 50px;
			}

运行结果：
在这里插入图片描述
运行结果可见，div1此时已经不占用空间了，并且定位也是相对于body元素进行的，因为并没有别的绝对定位出现，就会级向上排查，直到相对于body元素，即相对于浏览器窗口。

为了验证这个问题，我们再添加一个绝对定位，给div1和div2都添加绝对定位：
此刻的div2上一级绝对定位就为div1,因此就会按照div1进行绝对定位，而div则会根据body元素就行定位；

.box1{
				width: 200px;
				height: 200px;
				background:yellowgreen;
				position: absolute;
				left: 30px;
				top: 100px;
			}
			.box2{
				width: 200px;
				height: 200px;
				background: grey;
				position: absolute;
				left: 60px;
				top: 50px;
			}

运行结果：
在这里插入图片描述
发现运行结果和我们想象的一致；

4.固定位置（fix）：

直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
直接以浏览器为参考定位，浮动在页面中，元素位置不会随浏览器的滚动条滚动而变化；

.box1{
				width: 200px;
				height: 200px;
				background:yellowgreen;
				position: fixed;
				left: 30px;
				top: 50px;
			}

橘九。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.CSS基础_定位（position）

这一节我们来看一下定位，CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为：静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。1、静态定位（static）一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。先定义三个div不进行任何位置定义：...
复制链接

扫一扫

专栏目录