HTML position样式属性

最新推荐文章于 2022-07-10 09:46:13 发布

：十点差三分

最新推荐文章于 2022-07-10 09:46:13 发布

阅读量137

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41083450/article/details/102783787

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。用于定义建立元素布局所用的定位类型，该属性有多个值：
static：默认值。没有定位，元素出现在正常流中

1、relative：相对定位

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#out{
				border: crimson 1px solid;
				height: 300px;
				width: 300px;
			}
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body >
		<!--（1）position的fixed、relative、absolute-->
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		
		<div id="out">
			<div class="in" style="background-color: orangered"></div>
			<div class="in" style="background-color: cornflowerblue;"></div>
			<div class="in" style="background-color: peru; position: relative;right: 10px;bottom: 10px;"></div>
		</div>
	</body>

在这里插入图片描述

2、fixed：绝对定位的标签，相对于浏览器窗口进行定位，此元素不会随滚动条滑动

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#out{
				border: crimson 1px solid;
				height: 300px;
				width: 300px;
			}
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body >
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		
		<div id="out">
			<div class="in" style="background-color: orangered; "></div>
			<div class="in" style="background-color: cornflowerblue;"></div>
			<div class="in" style="background-color: peru; position: fixed;right: 10px;bottom: 10px;"></div>
		</div>
	</body>

在这里插入图片描述

3、absolute：绝对定位，相对于标签本身第一个position为非默认的父元素进行定位，若父标签均为默认则此时与fixed等价

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">ute:相对于第一个position值为非static的父标签
			 */
			#out{
				border: crimson 1px solid;
				height: 300px;
				width: 300px;
			}
			.in{
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body >
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />		
		<div id="out" style="position: relative;">
			<div class="in" style="background-color: orangered"></div>
			<div class="in" style="background-color: cornflowerblue;"></div>
			<div class="in" style="background-color: peru; position: absolute;right: 10px;bottom: 10px;"></div>
		</div>
	</body>

在这里插入图片描述

：十点差三分

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML position样式属性

1、fixed <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /* * position: * static * fixed * relative * absolute:相对于第一个...
复制链接

扫一扫

专栏目录