• CSS中position属性 (absolute,relative,static,fixed)


    只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流

    1、staticposition的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的topleft属性均不起作用。

    2、Fixed属性值是相对于浏览器窗口定位的(及视口坐标),设置该属性后的元素是独立的,他脱离文档流,当拖动滚动轴时该元素在浏览器窗口中的位置不会发生变化。时

    3、所有的父级元素均没有设置position(除了static属性值以外)时,则当某个子元素positionabsolute时,其topleft都是相对于文档坐标而言的,但是如果有某个父级元素设置了position属性且其值不为static,则topleft都是相对于父级容器而言的。同时当元素设置了绝对定位后将不会在占用原来的空间脱离文档流,普通的文档流元素的布局就像绝对定位的元素不存在一样。   因而利用绝对定位结合z-index可以很好的层叠显示样式 。  

    4、当父级元素中有某一级别的设置为了relative的属性值时,则后面子元素的positionabsolute时,topleft都是相对于这一父级而言的(下图是分别是第三级与第一级父级元素设置为relative的情况)。当元素设置了相对定位时,元素本身首先会出现在他出现的位置,然后根据设置的topleft等的值进行偏移,但是不管元素是否移动,他任然占据原有的空间,因此移动元素会导致它覆盖其他的框。

     5、 绝对定位是相对于定位的对象而言的,要调整图片的位置时结合lefttop属性,要居中显示则text-align:水平居中,line-height通过行高设置垂直居中的方式。绝对定位的元素如果没有设置top等属性值是没有作用的。相对定位的元素如果不设置top等属性值则任然在原位置显示。

     

  • 相关阅读:
    【react native】有关入坑3个月RN的心路历程
    【react-native】持续踩坑总结
    【react native】rn踩坑实践——从输入框“们”开始
    【CSS】少年,你想拥有写轮眼么?
    【杂谈】小记一个ios11的bug
    基于MATLAB&摄像头的实时目标跟踪
    WebRTC 音频模块单独编译 --【转载】
    高斯分布--转载
    win 7 64位 下 VMware Ubantu 14.04 设置共享文件夹失败
    GMM算法
  • 原文地址:https://www.cnblogs.com/heshan1992/p/5401294.html
Copyright © 2020-2023  润新知