html的position属性（position的用法有哪些）

本文目录

• position的用法有哪些
• Html中的position：absolute的意思
• html中的“ position： absolute”是绝对定位，怎么用
• position html怎么设置属性值
• HTML代码中如何用POSITION属性来固定一个DIV模块的位置，让其不随滚动条移动
• position(五种属性，以及每个属性的特点)

position的用法有哪些

position这个属性用于设置HTML元素的位置，需要和“top，left,right,bottom"结合使用。\x0d\x0a 当设置为position:absolute时，处于于绝对定位，这时设置的top，left,right,bottom等属性，设置的是该元素相对于他的父级元素的位置产生多少偏移量。\x0d\x0a 当设置为position:relative时，处于相对定位，这时设置的top，left,right,bottom等属性，可以设置该元素相对于它本身的位置产生多少偏移量。\x0d\x0a 当设置position:fixed时，这时设置的top，left,right,bottom等属性，设置的是该元素相对于body部分产生多少偏移量。\x0d\x0a 主要就是这么点了，你可以用这三个属性，设置相同的top，left,right,bottom值，在浏览器中看看效果。

Html中的position：absolute的意思

1、“position：absolute”是绝对定位的意思，单纯的使用absolute属性并不会其效果，需要配合“top bottom left right ”属性才能看到效果。首先需要新建一个html文件，这里定义了10个换行符，换行符的下面定义一个div：

2、此时保存文件，打开浏览器可以看到div在浏览器的下方位置，接下来来设置绝对定位，让div显示在任意位置：

3、给divc的class使用absolute属性, 并使用上下左右位置属性，设置向上和向左分别50px，接着保存文件：

4、再次打开浏览器，可以看到div的位置在浏览器上方，覆盖了换行符的位置：

html中的“ position： absolute”是绝对定位，怎么用

html中的“position：absolute”是绝对定位，一般配合“top”和“left”属性同时使用。

1、新建html文档，在body标签中添加一个div，然后在这个div中再添加一个div，这时默认情况下内div在外div的左上角：

2、为内div添加“position”属性，属性值为“absolute”，外div添加“position”属性，属性值为“relative”，这时内div会向外div绝对定位：

3、为内div设置距离顶部距离属性“top”和距离左侧属性“left”，这时内div会向外div做指定距离的定位：

position html怎么设置属性值

• static

• 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

• relative

• 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

• absolute

• 元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

• fixed

• 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

• sticky

• 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

请采纳

HTML代码中如何用POSITION属性来固定一个DIV模块的位置，让其不随滚动条移动

要想div固定在一个位置，可以使用css中的绝对定位来实现 position: absolute。然后可以通过top、left、right、bottom来定位方向。举个定位在顶部的例子：

《style》.top{  position: absolute;  top: 0px;  z-index:999;  border:1px red solid;}《/style》《body style="height:800px"》《div class="top"》DIV固定在顶部《/div》《/body》

position(五种属性，以及每个属性的特点)

1. position: relative;相对定位 1》 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性） 2》 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置） 3》 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移） 4》提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。）  （两个都为定位元素，后面的会覆盖前面的定位） 2. position: absolute;绝对定位 1》 使元素完全脱离文档流（在文档流中不再占位） 2》 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性） 3》 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性） 4》 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象） 5》 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移） 6》 提升层级（同相对定位） 3. position: fixed;固定定位   fixed 生成固定定位的元素，相对于浏览器窗口进行定位。 4. position:static ： 默认值 默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 5. position: sticky 粘性定位粘性定位，该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。 6. position: inherit 规定应该从父元素继承 position 属性的值。 7. posiyion: initial 设置该属性为默认值，详情查看 CSS initial 关键字 initial 关键字用于设置 CSS 属性为它的默认值。 initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。