CSS 布局 - position属性
position属性指定元素的位置(static, relative, fixed, absolute或sticky).
position属性
position属性指定元素的定位方式.
position有五个不同的值:
- static
- relative
- fixed
- absolute
- sticky
然后使用top,bottom,left和right属性定位元素. 但是,除非首先设置position属性,否则这些属性将不起作用. 根据position值的不同,它们的工作方式也不同。
position: static;
默认情况下,HTML元素定位为静态(static).
静态定位元素不受顶部，底部，左侧和右侧属性的影响.
position:static的元素;没有任何特殊的定位;它总是根据页面的正常流程定位:
这是使用的CSS:
position: relative;
带有position:relative;的元素,相对于其正常位置定位.
设置了相对定位元素的顶部，右侧，底部和左侧属性将使其远离其正常位置进行调整. 其他内容不会被调整以适应元素留下的任何空白.
这里是用的CSS:
position: fixed;
position:fixed;相对于视口定位,这意味着即使页面滚动，它也始终保持在同一位置. top,right,bottom和left属性用于改变元素的位置.
固定元素不会在页面中留下任何空白.
注意页面右下角的固定元素.这是使用的CSS:
position: fixed;
position: absolute;
绝对位置(position:absolute;)的元素;相对于最近定位的父元素定位(而不是相对于视口定位，如固定).
然而;如果绝对定位元素没有父元素,它将使用<body>元素,并随页面滚动一起移动.
注意:绝对定位元素的父元素不能是position:static.
下面是一个简单的例子:
这是所用的CSS:
position: sticky;
具有position:sticky;的元素,是根据用户的滚动位置定位.
粘性元素在相对和固定之间切换,具体取决于滚动位置. 它开始时是相对定位,直到在视口中满足了给定的偏移位置 - 然后它粘住(sticky)到固定的位置(如position:fixed).
注意: Internet Explorer, Edge 15和更早版本不支持sticky定位. Safari需要前缀-webkit-(看下面的例子). 你也必须至少指定top,right,bottom或left中的一个来使黏性元素工作.
在这个例子里,当你把该元素滚动到了顶部,黏性元素会黏到页面的顶部(top:0).
重叠元素
当元素位置改变时时,它们可以与其他元素重叠.
z-index属性指定元素的显示顺序(哪个元素应放在其他元素的前面或后面).
元素可以具有正或负显示顺序:
显示顺序较大的元素始终位于显示顺序较低的元素前面.
注意:如果两个定位元素在没有指定z-index的情况下重叠,则HTML代码中最后一个元素将显示在顶部.
所有的CSS定位属性
| 属性 | 描述 |
|---|---|
评论区