网页CSS样式——详述position样式属性，static relatice fixed absolute

最新推荐文章于 2023-09-06 19:28:00 发布

CandidBoy

最新推荐文章于 2023-09-06 19:28:00 发布

阅读量409

点赞数

本文链接：https://blog.csdn.net/CandidBoy/article/details/90360513

版权

本文详细介绍了CSS中的position属性，包括static、relative、absolute和fixed四种定位方式的使用和效果，帮助理解元素在网页布局中的定位机制。

摘要由CSDN通过智能技术生成

一、Position介绍

position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
常用值有static、absolute、fixed、relative这四种。

注：文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左到右进行流式排放的一种顺序。

二、四种常用position样式属性值介绍

1、static

默认值。没有定位，元素出现在正常流中（忽略top,bottom,left,right或者z-index声明）。

示例如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>static</title>
		<style type="text/css">
			.out{
    
				width:200px;
				border: 1px solid #00ee00;
			}

			.in{
    
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green;"></div>
        	<div class="in" style="background-color: yellow;"></div>
    	</div>
    	<br/>
    	<div class="out">
        	<div class="in" style="background-color: red;"></div>
        	<div class="in" style="background-color: green; position:static; top:20px; left:20px;/*top和left没起作用*/"></div>
        	<div class=<