CSS定位position

CSS定位position

static默认值：任意 position: static; 的元素不会被特殊的定位

relative 相对定位，相对原位置为参照点，进行移动。

<div class="one">A</div>
<style type="text/css">
.one{
    font-size: 150px;
	width: 500px;
	height: 200px;
	border: 5px solid #0ffaad;
    position: relative; 
			top: 100px; 
			left: 100px;
    }
</style>

下图中盒子相对原位置下移100px ,向右移100px。

fixed 固定定位，当前窗口为边界，盒子相对窗口边界参照进行移动。不随页面滚动而移动。

<div class="one">A</div>
<style type="text/css">
.one{
    font-size: 150px;
	width: 500px;
	height: 200px;
	border: 5px solid #0ffaad;
    position: fixed;
			left: 500px;
			bottom: 100px;
    }
</style>

下图中盒子相对窗口内右移500px ,向上移100px。

absolute 绝对定位，absolute 与 fixed的表现类似，但是它不是相对于视窗而是相对于最近的父元素，

且父元素是相对于最近的且position值不是static定位的父元素来定位，如果没有父级元素，就以根节点来参照 。

	<div class="one">
		A
		<div class="two">B</div>
	</div>
	<style type="text/css">
		 .one{
			font-size: 150px;
			width: 500px;
			height: 500px;
			border: 5px solid #0ffaad;
			position: relative;
					left: 100px;
		}
		.two{
			font-size: 150px;
			width: 150px;
			height: 200px;
			border: 5px solid #0fdafa;
			position: absolute;
					left: 200px;
					bottom: 50px;
		}

B盒子相对它的父元素A盒子，B盒子的左边框到A盒子的左边框移动了200px,B盒子的下边框到A盒子的下边框的距离为50px

边框移动了200px,B盒子的下边框到A盒子的下边框的距离为50px

[外链图片转存中…(img-znnRNcwm-1632417004649)]

Inherit：继承父元素的position值。