css中position定位属性详解

阅读量： 9 发布日期： 2022-11-04 09:05:33

CSS position属性允许你将元素定位在页面上的任意位置。

1、cssposition属性

css中position定位属性详解

CSS 中的 position 属性是定位元素的属性，元素的位置可以通过 left、right、top、bottom 四个属性来设置。默认情况下，元素的位置是根据文档流定位的，但是有时候我们需要对元素进行定位，使其不随文档流变化而变化。定位方式分为两种：

1. 绝对定位（absolute positioning）：元素的位置相对于包含它的第一个祖先元素（不是文档流中的祖先元素）定位，如果没有祖先元素，则相对于最近的包含它的元素。

2. 相对定位（relative positioning）：元素的位置相对于它在文档流中的原始位置定位。定位元素是使用 position 属性来设置的，该属性可以设置为以下值：static：默认值，元素按照正常文档流进行排列。relative：元素的位置相对于它在文档流中的原始位置定位。

2、定位方式

CSS 中的 position 属性允许您将元素放置在文档中的任何位置。这对于创建高级布局非常有用，有时您可能想要精确定位元素，而不考虑文档流。position 属性有四个可能的值：static：默认值。元素按照正常的流进行排列。relative：元素相对于其正常位置进行定位。absolute：元素绝对定位，相对于最近的已定位祖先元素。如果元素没有已定位的祖先元素，则相对于文档的根元素进行定位。fixed：元素绝对定位，相对于浏览器窗口进行定位。注意：absolute 和 fixed 定位的元素可能会导致文档的布局发生改变。

3、利用 position 定位元素

使用 position 定位的元素，通常我们将它称为“定位元素”。定位元素的位置通过“left”、“top”、“right”、“bottom”四个属性来设置。如果不设置这四个属性，定位元素就是普通元素，它会出现在文档流中，就像普通元素一样。

代码示例

{

position:absolute;

left:100px;

top:150px;

}

4、使用 z-index 与 position 完成多重定位

在对元素使用 z-index 属性定位时，需要注意以下几点：

1、z-index 值只有在定位元素上才会生效。

2、z-index 值只对同一级别或更高级别的定位元素起作用。