css---定位（二）

最新推荐文章于 2023-03-08 19:32:54 发布

河北颜良

最新推荐文章于 2023-03-08 19:32:54 发布

阅读量318

点赞数

文章标签： css css3 html html5

本文链接：https://blog.csdn.net/zhe06/article/details/105881185

版权

一.其他定位
1.相关属性
1.定位的方式
属性：position
取值：
1.static-静态的，默认值
2.relative-相对定位
3.absolute-绝对定位
4.fixed -固定定位
注意：
将元素的position设置为 relative/absolute/
fixed任意一种的话，那么该元素就成为已定位元素。
（1）定位方式-相对定位
1.什么是相对定位
元素会相对于它原来的位置偏移某个距离
需要注意的是：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
2.场合
元素位置微调时候使用相对定位。
（下面图片来源于网络，如有侵权立删）首先框2出现在它所在的位置上（即没有进行相对定位的位置），然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。并覆盖了框3的部分内容。
在这里插入图片描述

3.语法
属性：position
取值：relative

position: relative;

 案例：
<!DOCTYPE html>
<html lang="en">	
<meta charset="UTF-8">
<head>
<title></title>
		<style>
			.div1 {
				width: 100px;
				height: 100px;
				background: #00000;
				position: relative;  *相对定位 
			}
			.div2 {
				width: 100px;
				height: 100px;
				background: #333;
				position: relative;  *相对定位 元素相对于原来位置偏移，宽高都没变，撑大了容器。
				top: 100px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div2"></div>
	</body>
</html>

(2)定位方式 - 绝对定位
1.什么是绝对定位 & 特点
1.绝对定位的元素会脱离文档流-不占页面空间。
2.绝对定位的元素会相对于离它最近的，已经定位的祖先元素实现位置的初始化。
3.如果元素没有已经定位的祖先元素，那么元素对于body去实现位置的初始化。
2.语法
属性：position
取值：absolute
3.注意
绝对定位的元素会变成块级元素
（任何元素变成绝对定位的话，可以直接修改尺寸）
4.场合：

(下面图片来源于网络，侵权立删) ----绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。看下图，框2相对于框1进行绝对定位。
如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。及相当于图中没有框1框3，框一为（top：0 left：0），框2进行绝对定位。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的堆叠顺序（我会专门更新一篇讲堆叠顺序的文章）。
在这里插入图片描述

 案例：
<!DOCTYPE html>
<html lang="en">	
<meta charset="UTF-8">
<head>
<title></title>
		<style>
			.div1 {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
			}
			#box_relative {
				width: 100px;
				height: 100px;
				background-color: #000000;
				position: absolute;   *绝对定位
				left: 30px;
				top: 20px;
					}	
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div id="box_relative"></div>
	</body>
</html>

（3）定位方式-固定定位
1.让元素固定在浏览器窗口的某个位置处，不会随着滚动条的滚动发生位置的变化。
语法：
取值：position
取值:fixed
配合偏移属性实现元素位置的固定
注意：
1.固定定位的元素永远都是相对于body实现位置的初始化的。
2.固定定位元素会变成块级元素。

案例：

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">	
<meta charset="UTF-8">
<head>
<title></title>
		<style>
			.div1 {
				width: 100px;
				height: 100px;
				background: red;
			}
			.div2{
				width: 100px;
				height: 100px;
				background-color: #000000;
				position: fixed;
				top: 100px;
				height: 50px;
					}	
		</style>
	</head>
	
	<body>
		<div class="div1"></div>
		<div class="div2"></div>
	</body>
</html>