css----position样式属性

最新推荐文章于 2024-03-29 03:23:26 发布

余生为莹

最新推荐文章于 2024-03-29 03:23:26 发布

阅读量177

点赞数

分类专栏： HTML 文章标签： css HTML

本文链接：https://blog.csdn.net/qq_40831381/article/details/90345961

版权

HTML 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

position样式属性

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

任何元素都可以定位，但absolute或fixed元素会生成一个块级框，不论该元素本身是不是块级框。relative元素会相对于它在正常流中的默认位置偏移。

position样式属性的属性值为relative，但是没有指定top、right、left和bottom，这时其位置没有发生变化，即没有脱离正常文档流。和static效果一致，代码如下：
<div class="in" style="background-color: blue; position: relative;"></div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="border: 1px solid red; width:300px ; height:300px ;">
			<div class="in" style="background-color: blue;"></div>
			<div class="in" style="background-color: brown; position: fixed; bottom: 50px; right:50px ;"onclick="javaScript:window.scroll(0,0)" ></div>
			<div class="in" style="background-color: gray; position: absolute;"></div>
			<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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
		<style>
			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</body>
</html>

效果显示：

当下拉条向下拉时，棕色方块相对于浏览器定位，依旧是在相同的位置：

absolute在父类不同的情况

父类为默认的时候，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="border: 1px solid red; width:300px ; height:300px ;">
			<div class="in" style="background-color: blue;"></div>
			<div class="in" style="background-color: brown; position: absolute; bottom: 50px; right:50px ;"onclick="javaScript:window.scroll(0,0)" ></div>
			<div class="in" style="background-color: gray; position: fixed"></div>
			<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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
		<style>
			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</body>
</html>

父类为absolute的时候，代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="border: 1px solid red; width:300px ; height:300px ;position: absolute;">
			<div class="in" style="background-color: blue;"></div>
			<div class="in" style="background-color: brown; position: absolute; bottom: 50px; right:50px ;"onclick="javaScript:window.scroll(0,0)" ></div>
			<div class="in" style="background-color: gray; position: fixed"></div>
			<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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
		<style>
			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</body>
</html>

余生为莹

关注

0
点赞
踩
0

收藏

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

position样式属性文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。用于定义建立元素布局所用的定位类型，该属性有多个值：任何元素都可以定位，但absolute或fixed元素会生成一个块级框，不论该元素本身是不是块级框。relative元素会相对于它在正常流中的默认位置偏移。position样式属性的属性值为r...
复制链接

扫一扫