zoukankan      html  css  js  c++  java
  • 前端~定位属性position(relative、absolute、fixed)的分析

    前端~定位属性position(relative、absolute、fixed)的分析

    1,简单了解:

    relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute),作为定位的基准点(参照物)

    absolute: 随参照物的变化而变化

    fixed:固定

    2,position 是否会被内部的子元素继承?

    一般不能继承的属性,像盒模型,border、margin、padding等

    但是,当子元素(或者时子组件)需要调整位置时,一定要~重新设置一下position的属性值

    3,父级元素(position 是 relative)加入滚动条,子元素(position是 fixed)或 (position 是 absolute)的差异:

    fixed:固定 ,位置不变,即使有滚动条,依然不变位置。

    absolute:是参考父级元素的位置,父元素位置改变,它相应的改变。

    4,属性值relative 和 absolute 的区别:

    (1)是否脱离文档流: relative 不会脱离, absolute 会脱离

    (2)对象可否层叠(就是对象原来的位置是否还被占据):

      □ relative它是以自己本身所在位置进行偏移的,relative的对象被移出了原来的位置后,

      注意:他原来的位置还属于它的,别的元素不能替代它原来的位置. 

      □absolute以最近一层relative的父级元素对象作为定位基准点,进行移动位置,

      当absolute对象移出了原来的位置,那么他原来的位置也就不存在了, 其他元素可以占领它的位置。

     

    5,专业解释relative:

    相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。

    同样可以用z-index分层设计。

  • 相关阅读:
    ElasticSearch工作原理
    prometheus监控es集群
    es索引调优
    ES中Refresh和Flush的区别
    网络服务器技术Apache与Nginx,IIS的不同
    shell里/dev/fd与/proc/self/fd的区别
    常用抓包工具
    Ubuntu Kubuntu Xubuntu Lubuntu Dubuntu Mythbuntu UbuntuBudgie区别
    Android的Looper.loop()消息循环机制
    申请读写sd卡权限shell
  • 原文地址:https://www.cnblogs.com/shan333/p/15228637.html
Copyright © 2011-2022 走看看