position三种定位方式

position 属性规定元素的定位类型。

说明:这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position的属性值:

absolute:绝对定位,如果元素设置absolute,父级没有设置absolute,fixed,relative,那么该元素会找到上一级有没有这些定位元素,如果找到了,就会以该级元素为参照点定位,如果没有找到,那么就以浏览器定位。脱离文档流,定位的元素将会改变行块的表现,行级元素设置绝对定位,可以设置宽高,块级元素不会继承父级宽度,表现和float一样;

relative:相对定位,以自身为参照点进行偏移,不脱离文档流,比较温和,不会改变元素的默认表现,通常配合绝对定位使用。

fixed:固定定位,以浏览器为参照点进行偏移,脱离文档流,也会改变行块的标签的表现,参考absolute;

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

z-index:用来提升定位元素的层级;z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效

定位元素不设置z-index相当于为0;

注意:设置定位的元素再去设置浮动是没有效果的。

设置定位元素的层级会提升,覆盖没有设置定位的元素,在定位元素都没有设置z-index的前提下,后面的定位元素覆盖前面的定位元素,如果设置了z-index,那么谁的值大,谁的层级高,谁就在最上层覆盖其他的定位元素,如果一样大,还是后面的覆盖前面的。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,846评论 1 92
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,865评论 0 15
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 810评论 0 0
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 998评论 0 2
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,256评论 0 1