定位

作者: 好奇男孩 | 来源:发表于2018-05-13 02:16 被阅读8次

定位

1.absolute绝对定位,通过left/top/right/buttom,以具有position属性的父元素为参考进行定位,使用场景是需要相对于父元素或者<html>根节点进行定位。

absolute偏移的参考点首先是父元素,然后检查该父元素是否具有position属性,若具有position属性,则以该父元素为参考点进行偏移,若不具有则继续往上一级找,查看其是否有position属性,直到hrml标签为止还无,则以根节点html为参考点。

2.relative相对定位,通过left/top/right/buttom,以自己的位置进行定位,使用场景是偏移前的位置需要保留,不脱离文档流。

relative偏移的参考点是自身位置,是拿偏移前的位置与偏移后的位置进行比较,比如top10px,表现出来的其实是向下移动10px。

3.fixed固定定位,通过left/top/right/buttom,以浏览器窗口进行定位,使用场景是固定于浏览器的某个位置不动。

fixed偏移的参考点是浏览器窗口。

注意:position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

       position:relative发生偏移后,在文档流中的位 置不变。
       负margin会改变元素在文档流中的位置。

z-index

  • 因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

  • z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下。

  • z-index属性适用于定位元素(position属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序,也就是说如果元素是没有定位的,对其设置的z-index会是无效的。

  • 相同z-index谁上谁下
    1.如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象,那么按文档流顺序,后面的覆盖前面的。
    2.如果两个元素都没有设置z-index,使用默认值,一个定位一个没有定位,那么定位元素覆盖未定位元素
    父子关系处理
    1.如果父元素z-index有效,那么子元素无论是否设置z-index都和父元素一致,会在父元素上方
    2.如果父元素z-index失效(未定位或者使用默认值),那么定位子元素的z-index设置生效

相关文章

  • 定位,定位,还是定位

    要想成为一个好的文字的输出者,首先要给自己一个合理的定位。定位可以首先想象自己想成为的角色:一个能够通过各种故事启...

  • 10-CSS定位流

    定位流 定位流分类相对定位绝对定位固定定位静态定位 相对定位 什么是相对定位?相对定位就是相对于自己以前在标准流中...

  • CSS中的几种定位

    CSS中常用的定位有 普通定位,相对定位 绝对定位、fixed定位 浮动 1、普通定位和相对定位 css中的元素有...

  • 2017-02-23 CSS 学习笔记

    定位流 定位流分类 相对定位 绝对定位 固定定位 静态定位 什么是相对定位相对定位就是相对于自己以前在标准中的位置...

  • #30天专注橙长计划#品牌定位30(6)营销推广1

    品牌定位的维度包括: 市场定位、价格定位、形象定位、地理定位、人群定位、渠道定位等; 经过前期大量的市场调研工作,...

  • D28:系统地图, 高德地图

    目录一. 定位功能 iPhone手机定位(基站定位, WiFi定位, GPS定位: 定位所需时间递增, 精确度递增...

  • 相对定位、绝对定位和固定定位

    1. 相对定位 定位有三种:相对定位,绝对定位、固定定位。 相对定位: position:relative lef...

  • 定位流

    定位流指的是:相对定位(relative)/绝对定位(absolute)/固定定位(fixed) 不包括静态定位(...

  • CSS补充2

    定位position 定位分为四种:相对定位 relative,绝对定位 absolute,固定定位 fixed,...

  • 定位

    1、static定位(普通流定位) -------------- 默认定位 2、float定位(浮动定位) 例:f...

网友评论

    本文标题:定位

    本文链接:https://www.haomeiwen.com/subject/wkekdftx.html