position属性

css position属性

static: 默认值。没有定位,元素出现在正常的流中。


relative:生成相对定位的元素,相对于其正常位置进行定位。因此,left:20 会向元素的left位置添加20像素。


可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。


absolute : 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过left top right 以及 bottom属性进行规定。

如果元素没有已定位的父元素,那么它的位置相对于<html>:

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。


fixed :生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过left top right 以及 bottom属性进行规定。


sticky 定位

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

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

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

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

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

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


z-index属性指定了一个元素的堆叠顺序

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

z-index无效的情况,一共有三种:

1、父标签 position属性为relative;

2、问题标签无position属性(不包括static);

3、问题标签含有浮动(float)属性。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 2,956评论 0 7
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • position属性比起其他的基础属性来讲要复杂一些,我在这试着把里面的门道全部总结出来。 目前position有...
    microkof阅读 3,662评论 3 5
  • 我们先来看看CSS3 Api中对position属性的相关定义:static:无特殊定位,对象遵循正常文档流。to...
    JasonStack阅读 681评论 0 3
  • 弯弯写于2013年3月 都说女人喜欢坏男人,那么男人大抵也是喜欢坏女人的吗? 于是总会有些人说你是那样的好,你是一...
    手语心言阅读 217评论 0 0