html网页使用position定位的方法

阅读量： 8 发布日期： 2022-10-27 15:42:19

1、网页定位样式的选择

定位样式的选择：首先，我们要确定我们的目标元素的定位样式。定位样式有 static、relative、absolute、fixed 四种。定位的基本概念：静态定位：不使用任何定位属性，元素出现在正常的文档流中。相对定位：与静态定位相反，元素会相对自己的默认位置偏移。绝对定位：元素会完全脱离文档流，相对于定位父级进行定位。固定定位：元素会完全脱离文档流，相对于视口进行定位。定位元素的前提是设置父元素的 position 值，如果没有设置，父元素默认为 static ，子元素所有的定位都是相对于文档流定位。

2、position属性的使用

当我们想要对某个元素进行定位时，我们需要使用position属性。通常有四个值：static、relative、absolute和fixed。默认值为static，如果没有设置position属性，元素将处于正常的文档流中。static：正常文档流，元素排列正常，偏移量无效。relative：相对定位，相对于其正常位置进行定位，因此，如果没有设置top, bottom, left 或right属性，元素将保持其正常位置。absolute：绝对定位，相对于最近的已定位祖先元素进行定位。如果元素没有已定位的祖先元素，则相对于包含块进行定位。fixed：绝对定位，相对于浏览器窗口进行定位，元素将始终处于窗口的视图中。

3、position定位值有哪些

HTML中的position属性有4个值，分别是static、relative、absolute和fixed。static：静态定位，元素按照正常的方式排列。relative：相对定位，元素按照正常的方式排列，但是当元素设置了top,bottom,left,right等属性时会相对于其正常位置偏移。absolute：绝对定位，元素定位相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，则相对于元素。fixed：固定定位，元素定位相对于浏览器窗口。

4、html网页使用position定位的方法

定位样式的选择：当我们想要精确定位一个元素时，我们通常会选择使用position定位。首先，我们来了解一下 position 属性的取值。position 属性的取值有四个：static：默认值，没有定位，元素出现在正常的流中（块属性元素会另起一行放置）。relative：相对定位，相对于其正常位置进行定位。元素的位置会被偏移，但是文档的布局并没有变化。元素会保留它原有的位置，只是相对它原有位置偏移了。absolute：绝对定位，元素脱离文档流，并且通过 left 、 top 、 right 、 bottom 属性定位，元素的位置是相对于最近的已定位祖先元素。如果元素没有已定位的祖先，那它的位置相对于最初的包含它的容器，也就是 body 元素。

作者: bosscms，转载时必须经得同意并以链接形式注明作者和原始出处及本声明。

CSS样式