html-CSS定位（possition 样式属性）静态定位（static）固定定位（fixed不随滚动条的动而动）相对定位（fixed相对于自己的原来的位置）绝对定位（absolute相对于父容器）

最新推荐文章于 2024-05-06 14:16:34 发布

¡Venceremo

最新推荐文章于 2024-05-06 14:16:34 发布

阅读量3.1k

点赞数 3

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125753446

版权

笔记专栏收录该内容

52 篇文章 2 订阅

订阅专栏

效果css定位：层级之间的叠加现象。能够使信息呈现纵向空间发展

常见的定位方式：静态定位、固定定位、相对定位、绝对定位

possition 样式属性

属性值
static	默认值，静态定位、无定位，元素按照默认文档流进行布局
absolute	绝对定位，将对象从文档流中脱离出来，相对于最近的一个已定位（相对/绝对）的祖先元素进行绝对定位；如果不存在这样的祖先元素，则向相当于最外层的包含框进行定位
fixed	固定定位，根据浏览器窗口来进行位置偏移,将对象从文档流中脱离出来
relative	相对定位，相对于对象自身位置进行位置偏移,将对象从文档流中脱离出来

与前面的属性值配套使用
top	元素向上的偏移量
left	元素向左的偏移量
right	元素向右的偏移量
bottom	元素向下的偏移量

由于脱离了文档流，所以需要重新定位

定位层级：z-index 属性(垂直于平面的坐标系)

属性值
auto	默认值，层级高低与父元素相等
number	指定元素的层级高低，值越大，层级越高（越靠近用户的方向）
inherit	继承父级元素的z-index属性值

1-fixed固定定位- 当页面滑动时，右边的图标始终不变

lorem随机生成的使用

40行

此时出现了滚动条

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position固定定位</title>
	<style type="text/css">
		/*类选择器*/
		.outer{
			width:700px;
			margin:0 auto;/*水平居中*/
		}
		.toolbar{
			position: fixed;/*下面的可以是和定位配合使用的*/
			right: 0;
			width: 60px;
			height: 80px;
			top:50%;
			border: #0F0F0F solid 3px;
			background: #EF0B0F;
		}
	</style>
	
</head>
<body>
	<div class="outer">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<div class="toolbar">
			toolbar
		</div>
	</div>
	
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position固定定位</title>
	<style type="text/css">
		/*类选择器*/
		.outer{
			width:700px;
			margin:0 auto;/*水平居中*/
		}
		.toolbar{
			position: fixed;/*下面的可以是和定位配合使用的*/
			right: 0;
			width: 60px;
			height: 80px;
			top:50%;/*原来的margin 也就是top=0 bottom 80s*/
			border: #0F0F0F solid 3px;
			background: #EF0B0F;
			margin-top: -40px;/*设置上部边距*/
		}
	</style>
	
</head>
<body>
	<div class="outer">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, officia.</p>
		<div class="toolbar">
			toolbar
		</div>
	</div>
	
</body>
</html>

2-relative相对定位-相对于自己原来的位置

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position相对定位</title>
	<style type="text/css">
		/*群组选择器（并集选择器) 统一的设置*/
		.box1,.box2,.box3{
			width:100px;
			height: 100px;
			border: 1px #000 dashed;
			display: inline-block;/*在同一行显示 行内块元素*/
			margin: 5px;
			
		}
		.box1{
			background-color: #E11014;
			
		}
		.box2{
			background-color: #8EEB3A;
			width:50px;
			height: 50px;
			position: relative;
			left: 10px;
			top: 10px;
	
		}
		.box3{
			background-color:#13F0BC; 
		}
	</style>
	
</head>
<body>
	<div class="box1">div1</div>
	<div class="box2">div2</div>
	<div class="box3">div3</div>
	
</body>
</html>

相对定位脱离了文档流，可以对box3进行覆盖

后定义的脱离文档流的元素会呈现在上方

使用了z-index来打破，是呈现的顺序是你想要的

3-absolute绝对定位-相对于父容器

一开始

绝对定位元素脱离文档流悬浮在文档上方

绝对定位可以和其他的组合使用

绝对定位：是不随随着滚动条的移动而移动的，是整个文档的绝对位置

绝对定位的定位基准也可以是某一个已经定位的元素

此时的outer没有定位特性，这里的box1是相对于整个文章的Body的定位的

此时的box1的绝对定位的坐标相对于已定位的父元素（outer的容器内）

¡Venceremo

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html-CSS定位（possition 样式属性）静态定位（static）固定定位（fixed不随滚动条的动而动）相对定位（fixed相对于自己的原来的位置）绝对定位（absolute相对于父容器）

html-CSS定位（possition 样式属性）静态定位（static）固定定位（fixed不随滚动条的动而动）相对定位（fixed相对于自己的原来的位置）绝对定位（absolute相对于父容器）含有Lorem的用法
复制链接

扫一扫