css position定位类型(position的绝对定位)

编程之家2026-06-02878次浏览

大家好，今天来为大家分享css position定位类型的一些知识点，和position的绝对定位的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！

css的position的属性有哪些

position属性指定了元素的定位类型。它有五个属性，分别是

static：HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

relative：相对定位元素的定位是相对其正常位置。

fixed：元素的位置相对于浏览器窗口是固定位置。注：即使窗口是滚动的也不会移动

absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。注：定位使元素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠。

sticky：基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative与 position:fixed定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

CSS position属性

position很重要，有以下几个值：static，relative，absolute，fixed。

*所有主流浏览器都支持 position属性，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。

relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。

absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。

fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

注意：很多网页都是居中的，这样，当对元素进行绝对定位的时候，在不同的分辨率下显示会有偏差，这时，我们可以通过类似下面的方法来处理：

</div>

在CSS 中,用 float 和 position 的区别是什么

CSS布局浮动(float)和定位(position)属性的区别：

1、postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

2、float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染，可以重叠，原位置被清空。

二者之中最大的差别就是位置保留。

3、同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。

常用的清除浮动的方法有两种：

通过在容器中添加一个标签，设置该标签的样式为 clear: both

容器设置overflow: hidden

<div style="float: left; position: absolute;">我是DIV</div>

<div>

效果：

如果你还想了解更多这方面的信息，记得收藏关注本站。

钢铁烈阳？钢铁烈阳合到哪个区了java编写 java免费下载