position之属性

position 属性指定了元素的定位类型。

position 属性的五个值：

static （静态定位）

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。
```
div.static {position: static;border: 3px solid #73AD21;
}
```
relative （相对定位）相对定位元素的定位是相对其正常位置.

h2.pos_left
{position:relative;left:-20px;
} h2.pos_right { position:relative; left:20px; }

移动相对定位元素，但它原本所占的空间不会改变

h2.pos_top
{position:relative;top:-50px;
}

fixed （绝对定位）
元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

p.pos_fixed
{position:fixed;top:30px; right:5px; }

absolute （固定定位）
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2
{position:absolute;left:100px; top:150px; }

sticky (粘性定位)

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

div.sticky {position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }

转载于:https://www.cnblogs.com/ly52990/p/9944209.html

position之属性相关推荐

css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 ...
position 的属性值
理论上来说,全部 position 的取值有8个包括:position:static | relative | absolute | fixed | sticky | initial | inhe ...
positio有哪些属性？position的属性如何使用
position的属性 position的属性有:static(默认位置),relative(相对定位),absolute(绝对定位),fixed(固定定位) 1.position的第一个属性--st ...
【css】CSS position(定位)属性
一.CSS position(定位)属性 absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "t ...
position的属性
一.position的属性 1.position: relative;相对定位不影响元素本身特性, 不会使元素脱离文档流, 没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移), 提升层级( ...
html随页面移动固定,div设置了position: fixed属性后如何可以做到随浏览器左右移动？...
把一个div标签,给它的属性设置position: fixed;bottom:0;固定在浏览器的最底部. 这个div标签在浏览器上下滚动的时候,会一直保持在屏幕最底部,这一点没有问题.但问题是当浏览器 ...
关于浮动float属性和position:absolute属性的区别
最近返回头看了很多书籍,一直在纠结float属性和absolute绝对定位的区别和使用的情况,给大家分享一下自己的心得和体会吧. 1,float属性 float属性意义是让元素拜托独占一行的霸道总裁, ...
CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
html相对位置置顶,css定位（position）属性怎么用？
在CSS中,定位(position)属性用于规定元素的定位类型,定义建立元素布局所用的定位机制.下面给大家介绍一下position属性,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
【HTML＋CSS网页设计与布局从入门到精通】第14章-float/position/display属性
目录 float属性 float:left float:left-例2 float:left-例3 float:right; 对比father p{clear:right;} 例1 例2 .fathe ...

position之属性

position之属性相关推荐

最新文章

热门文章