怎样运用css定位html元素？（附示例）
要在元素上运用定位，必需第一声明其位置property，该位置指定用于元素的定位办法的类型。运用position属性值，运用top，bottom，left和right属性定位元素。它们的位置也取决于它们的位置值。（举荐课程：css视频教程）
定位值有五品种型：static（静态的）、relative（相对的）、fixed（牢固的）、absolute（绝对的）、sticky（黏性的）
static（静态的）
默许状况下，HTML元素定位为静态，元素依据文档的正常流程定位; 静态定位元素不挨顶部，底部，左侧和右边属性的影响。一个元素用position: static定位不会有其他特别的定位方式。
用于将位置设定为静态的CSS是：
position: static;
接下来是运用静态位置值的示例：
SQUARE 1 SQUARE 2 SQUARE 3 SQUARE 4
结果如下：
relative（相对的）
该元素依据文档的正常活动位于相关于它的正常位置被定位，然后偏移相关于自身的基于上，右，下和左的值。偏移量不会影响任何其他元素的位置; 因而，页面布局中为元素给出的空间与位置是静态的雷同。设定相对定位元素的顶部，右边，底部和左侧属性将使其远离其正常位置进行调整。其他内容不会被调整以顺应元素留下的任何空白。
用于将位置设定为相对的CSS是：
position: relative;
下列示例运用相对位置值：
SQUARE 1 SQUARE 2 SQUARE 3 SQUARE 4
结果如下：
absolute（绝对的）
该元素将从普通文档流中删除，而且在页面布局中，不会为该元素新建空间。元素相关于比来定位的先人定位，要是有的话; 不然，它相关于初始包括块放置，其终究位置由顶部，右边，底部和左侧的值肯定。
用于将位置设定为绝对的CSS是：
position: absolute;
拥有position: absolute; 相关于最接近的先人定位的元素。要是绝对定位元素没有定位先人，它将运用文档正文，并与页面滚动一起挪移。“定位”元素是其static位置的元素
下列例子强调元素的绝对位置：
SQUARE 1 SQUARE 2 SQUARE 3 SQUARE 4
结果如下：
fixed（牢固的）
它从正常文档流中删除的元素，而且在页面布局中，没有为元素新建空间。元素相关于由视口创立的初始包括块定位，其终究位置由值top，right，bottom和left肯定。此值始终新建新的堆叠高低文。
用于将位置设定为牢固的CSS如下所示：
position: fixed;
元素position: fixed; 相关于视口定位，这意味着即便页面滚动，它也始终维持在统一位置。top，right，bottom和left属性用于定位元素。
sticky（黏性的）
该元素对应于文档的正常流程定位，然后依据顶部，右边，底部和左侧的值相关于其最接近的上升块级别（包含与表格相干的元素）偏移。偏移量不会影响任何其他元素的位置。
此值始终新建新的堆叠高低文。请注意，粘性元素“粘附”到其比来的先人，即便该先人不是比来的现实滚动先人，也拥有“滚动机制”。
用于将位置设定为粘性的CSS是：
position: sticky;
position: sticky; 依据会员的滚动位置定位元素，并依据滚动位置在 位置relative 和fixed位置之间切换。
重叠元素
网页上的重叠元素非常实用，可以突出显示，推行和关注我们网页上的重要内容。在您的网站上制作元素叠加是非常实用且非常有价值的功能设计实践。当元素被定位时，它们可以与其他元素重叠，因而为了指定次序（应当在其他元素的前面或背面放置哪个元素），我们应当运用z-index属性。堆栈次序较大的元素始终位于堆栈次序较低的元素前面。作为通知，z-index属性仅适用于定位元素（position：absolute，position：relative或position：fixed）。
下列示例显示了z-index属性怎样在不一样的方块上工作：
SQUARE 1 SQUARE 2 SQUARE 3
结果如下：
在图像上定位文本
下面的示例运用上述CSS定位值在图像上遮盖一些文本：
Wild nature
结果如下：
最后
在本文中，我们已经描述并给出了CSS定位类型的示例，并描述了怎样重叠元素并在图像上增加一些文本。
以上就是怎样运用css定位html元素？（附示例）的细致内容，更多请关注 百分百源码网 其它相干文章！
