CSS 定位属性position

电玩女神 2024-02-17 21:13 167阅读 0赞

**一、position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。**

有4种不同类型的定位:

**①absolute ：绝对定位**；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

**②relative ：相对定位**；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

**③fixed ：固定定位**；类似于absolute，但不随着滚动条的移动而改变位置。(一般很少用,浏览器不兼容!)

**④static ：默认值**；默认布局。

**二、position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性：**

①left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素。

②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。

③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。

④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。

上面属性的值可以为负，单位：px,%。

**二、position属性的应用**

(1)absolute 绝对定位:

(1-1)如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

![Center][]

效果:

![Center 1][]

(1-2)如果以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移.

.d1 {
    	width:100px;
    	height:50px;
    	border:1px solid green;
    	/* 相对定位:作为参考点 */
    	position:relative;
    	left:50px;
    	
    }
    .d2 {
    	width:100px;
    	height:50px;
    	border:1px solid green;
    	background:#FCF;
    	/* 绝对定位: */
        position:absolute;
    	left:150px;
    	top:150px;
    }

![Center 2][]

效果:

![Center 3][]

**(2)relative 相对定位:**

**无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。**

**![Center][]**

.d1 {
    	width:100px;
    	height:50px;
    	border:1px solid green;
    	/* 相对定位:作为参考点 */
    	position:relative;
    	left:50px;
    	top:50px;
    	
    }

效果:

*![Center 4][]*

**综合应用:**

**效果:**

**![Center 5][]**

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/597144d7aebd40018a0fb138662397cd.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/991e726edc1640918e54ba67a2639b6b.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/901646c562c2429f96325c84e54833d5.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/63c7bd8925834c6bbc0f85568d16eef1.png
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f90e888b012a4b0988aec913a5b7ad29.png
[Center 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/da322a510f1d4320839d63008b327a4a.png