CSS定位样式

最新推荐文章于 2025-05-15 14:51:01 发布

转载最新推荐文章于 2025-05-15 14:51:01 发布 · 1k 阅读

标签

#css #html #js #java #web前端

html+css+js 专栏收录该内容

1 篇文章

订阅专栏

使用定位样式可以控制元素的位置，常用的定位方式包括3种定位方式，一种是static定位方式，即默认定位方式，一种是relative定位方式，即相对定位方式和最后一种为absolute定位方式，即绝对定位方式。

1.定位样式position

定位样式position的语法：

 position:取值

其中，取值有3个：
默认值：static
相对定位：relative
绝对定位：absolute

默认定位static

采用默认定位时，一般可以不用设置position样式即可。例子：

    <!doctype html>
    <html>
    	<head>
    		<title>定位样式</title>
    		<meta charset="utf-8">
    		<style>
    			.par{width:300px;height:300px;border:1px solid red;background-color:red;}
    			.sub1{width:100px;height:100px;border:1px solid red;background-color:green;}
    			.sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;}
    		</style>
    	</head>
    	<body>
    		<div class="par">
    			<div class="sub1">sub1</div>
    			<div class="sub2">sub2</div>
    		</div>
    	</body>
    </html>

效果：

注意：按照默认定位时，各个元素是按照文档流的形式向下往下排，同时保证块状元素独占一行的原则。

相对定位relative

生成相对定位的元素，相对于其正常位置进行定位，同时配合top, bottom, left和right样式完成定位，例如：

    <!doctype html>
    <html>
    	<head>
    		<title>定位样式</title>
    		<meta charset="utf-8">
    		<style>
    			.par{width:300px;height:300px;border:1px solid red;background-color:red;}
    			.sub1{position:relative;left:10px;top:10px;width:100px;height:100px;border:1px solid red;background-color:green;}
    			.sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;}
    		</style>
    	</head>
    	<body>
    		<div class="par">
    			<div class="sub1">sub1</div>
    			<div class="sub2">sub2</div>
    		</div>
    	</body>
    </html>

效果：

注意：此时class值为sub1的定位样式为relative，它的定位没有影响sub2的定位，即sub2还是在原来的位置，但是sub1元素则是相对于它为默认定位方式时的位置，向下移动10px，同时向右移动10px。

绝对定位absolute

对于绝对定位的元素，则需要分其的父元素及以上元素的定位情况来说：
如果其父元素中有设置了Position属性，并且属性值为 absolute 或 relative的时候，那么子元素相对于该父元素来进行定位。
如果不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位。

例如（不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位）：

    <!doctype html>
    <html>
    	<head>
    		<title>定位样式</title>
    		<meta charset="utf-8">
    		<style>
    			.par{margin-top:40px;width:300px;height:300px;border:1px solid red;background-color:red;}
    			.sub1{position:absolute;left:10px;top:10px;width:100px;height:100px;border:1px solid red;background-color:green;}
    			.sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;}
    		</style>
    	</head>
    	<body>
    		<div class="par">
    			<div class="sub1">sub1</div>
    			<div class="sub2">sub2</div>
    		</div>
    	</body>
    </html>

效果：

注意：对于sub1元素设置了绝对定位，但是其父元素没有设置定位方式，则其就相对于浏览器定位，即相当于浏览器，向下称移动10px，向右移动10px，同时需要注意，由于sub1是绝对定位，则其会脱离文档流，则其下面的sub2元素的位置就向上移动了。

例如（父元素中有设置了Position属性，并且属性值为 absolute 或 relative的时候，那么子元素相对于该父元素来进行定位）：

    <!doctype html>
    <html>
    	<head>
    		<title>定位样式</title>
    		<meta charset="utf-8">
    		<style>
    			.par{position:relative;top:40px;width:300px;height:300px;border:1px solid red;background-color:red;}
    			.sub1{position:absolute;left:10px;top:10px;width:100px;height:100px;border:1px solid red;background-color:green;}
    			.sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;}
    		</style>
    	</head>
    	<body>
    		<div class="par">
    			<div class="sub1">sub1</div>
    			<div class="sub2">sub2</div>
    		</div>
    	</body>
    </html>

效果：