CSS基础学习之定位---流定位浮动定位相对定位绝对定位固定定位粘性定位

最新推荐文章于 2024-06-13 10:31:50 发布

kate_inurArea

最新推荐文章于 2024-06-13 10:31:50 发布

阅读量705

点赞数 3

分类专栏： css学习文章标签： html 定位 css3

本文链接：https://blog.csdn.net/sinat_38505686/article/details/105910793

版权

css学习专栏收录该内容

1 篇文章 1 订阅

订阅专栏

CSS基础声明

定位

定位

定位简介

定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

流定位
浮动定位
相对定位
绝对定位
固定定位
粘性定位

流定位

页面中的块级元素框从上到下一个接一个地排列

每一个块级元素都会出现在一个新行中（比如p元素、div元素）
元素框之间的垂直距离是由框的垂直外边距计算出来的

行内元素将在一行中从左到右排列水平布置

不需要从新行开始
可以使用水平内边距、边框和外边距调整它们的间距

浮动定位

浮动定位是：

让元素脱离普通的流定位
将浮动元素放置在父元素的左边或者右边
浮动元素依旧位于父元素之内

浮动的框可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动框的边框为止

经常使用它来实现特殊的定位效果

浮动定位示例一：
父元素中有三个元素框d1、d2、d3，如果把d1元素框向右浮动，则它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.outer{
	border: 1px solid red;
	width: 400px;
	height: 400px;
	
}
.inner{
	border: 1px solid red;
	width: 100px;
	height: 100px;
}


</style>
</head>
<body>
	<div class=outer>
		<div class="inner" id="d1">d1</div>
		<div class="inner" id="d2">d2</div>
		<div class="inner" id="d3">d3</div>
		<p>浮动定位时，观察我的位置</p>
	</div>
</body>
</html>

在浏览器运行该HTML代码，效果如下：
在这里插入图片描述
加入以下的代码至style标签中，将d1元素框向右浮动：

#d1{
	float:right;
}

效果如下图，可以看到d1元素框浮动到父元素框内的最右边，并且观察到p标签内的文本向上移动了。
在这里插入图片描述

浮动定位示例二：
当元素框d1向左浮动时，它脱离流定位并且向左移动，直到它的左边缘碰到父元素的左边缘
因为元素框d1不再处于流定位中，所以它不占据空间，实际上盖住了框d2，使框d2从视图中消失
将框d1的部分css代码修改成如下：

<style>
.d1{
	float: left;
}
</style>

效果如下图：
在这里插入图片描述
可以观察到框d1覆盖了框d2，但是文字d2缺跑到了框d3的位置，所以造成了d2，d3文字重叠的效果。

浮动定位小结：
如果需要设置框浮动在父元素的左边或者右边，可以通过float属性来实现

float属性定义元素在哪个方向浮动
在CSS中，任何元素都可以浮动
float: none/left/right;

清除浮动定位

clear属性用来清除浮动所带来的影响
clear: none/ left/ right/ both
定义了元素的哪边上不允许出现浮动元素

清除浮动定位的效果
代码修改如下：

#d1,#d2,#d3{
	float:left;
}

效果如下：
在这里插入图片描述
若是给要给p清除浮动，插入代码：

p{
	clear:left;
}

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

相对定位

元素原本所占的空间不释放
元素框会相对于它原来的位置偏移某个距离
设置垂直或者水平位置，让元素相对于它的起点进行移动

设置元素为相对定位

首先需要设置position，属性的值为relative
然后使用left或right属性设置水平方向的偏移
或者设置top或bottom属性设置垂直方向的偏移量

相对定位示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
	border: 1px solid red;
	width: 100px;
	height: 100px;
	position: relative;
	left: 100px;
	top: 50px;
}
</style>
</head>
<body>
	<h1>相对定位</h1>
	<div>d1</div>
</body>
</html>

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

绝对定位

将元素的内容从当前定位中移出，释放空间

并使用偏移属性来固定该元素的位置

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

设置元素为绝对定位

首先需要设置position属性值为absolute
然后使用left或right属性设置水平方向的偏移
或者设置top或bottom属性设置垂直方向的偏移量

绝对定位示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.outter{
	border: 1px solid blue;
	width: 300px;
	height: 300px;
	position: relative;
}

.d1{
	border: 1px solid red;
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: 10px;
	right: 10px;
}

</style>
</head>
<body>
	<div class="outter">
	<h1>绝对定位</h1>
		<div class="d1">d1</div>
	</div>
</body>
</html>

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

固定定位

将元素的内容固定在页面的某个位置

元素从普通流中完全移除，不占用页面空间
当用户向下滚动页面时元素框并不随着移动
设置固定定位
首先需要设置position属性的值为fixed
通过left, top, right, bottom这些偏移属性来定义元素的位置

固定定位示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	.return{
		width: 60px;
		height: 30px;
		line-height: 30px;
		background-color: #ccc;
		text-align: center;
		position: fixed;
		right: 10px;
		bottom: 30px;
	}
	.main{
		border: 1px solid red;
		width: 400px;
		height: 500px;
	}
	.return>a {
		text-decoration: none;
	}
</style>
</head>
<body>
	<h1>固定定位</h1>
	<p>移动页面，观察右下角按钮位置，点击按钮可以回到页面顶部</p>
	<div class="main">d1</div>
	<div class="main">d2</div>
	<div class="main">d3</div>
	
	
	<div class="return">
		<a href="#">顶部</a>
	</div>
</body>
</html>

具体效果自已自行尝试，这里就不放图片了

粘性定位

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换
可以在这个网站尝试：https://www.runoob.com/css/css-positioning.html#position-static

堆叠顺序

一旦修改了元素的定位方式，则元素可能会发生堆叠
可以使用z-index属性来控制元素框出现的重叠顺序

z-index属性

属性值为数值，数值越大表示堆叠顺序更高，即离用户更近
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，也就是数值越大的在上层
改属性值可以是负数，表示离用户更远

更改堆叠顺序示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	
	img {
		position: absolute;
	}
	#img1 {
		left: 100px;
		top: 100px;
	}
	#img2 {
		left: 200px;
		top: 200px;
	}
	#img3 {
		left: 300px;
		top: 100px;
	}
	img:hover {
		z-index: 999;
	}
</style>
</head>
<body>
	<div>
		<img src="../01.jpg" id="img1"/>
		<img src="../02.jpg" id="img2"/>
		<img src="../03.jpg" id="img3"/>
	</div>
</body>
</html>

在同目录下添加三张图片，修改图片命名与代码内的一致。当鼠标悬停在某张图上时，该图在页面最前端，效果如下：（该图中鼠标悬停在最右的图片上）
在这里插入图片描述

定位属性总结

属性	说明
position	规定元素的定位类型，可取值：static/relative/absolute/fixed
偏移属性	top, bottom, left, right属性，用于定义元素框的偏移位置
z-index	设置元素的堆叠顺序
float/clear	浮动定位属性

使用position属性和偏移属性实现流定位、相对定位、绝对定位和固定定位
使用float属性实现浮动定位
其他属性为辅助属性

kate_inurArea

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
CSS基础学习之定位---流定位浮动定位相对定位绝对定位固定定位粘性定位

CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位堆叠顺序定位属性总结定位定位简介定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置流定位浮动定位相对定位绝对定位固定定位流定位页面中的块级元素框从上到下一个接一个地排列每一个块级元素都会出现在一个新行中（比如p元素、div元素）元素框之间的垂直距离是由框的...
复制链接

扫一扫