zoukankan      html  css  js  c++  java
  • absolute(绝对定位)和 relative(相对定位)

    参考了:http://www.w3cfuns.com/article-258-1-1.html

    1.在没有父级的情况下

    absolute--以浏览器左上角为参考点,trbl辅助定位

    relative--以浏览器左上角为参考点,trbl辅助定位 ---如果元素的同级 ,就会以正常的文档流来布局,然后再执行top元素,相当于mairgin-top!

    2.有父级,但是父级没有设置position属性

    absolute ---以浏览器左上角为参考点,trbl辅助定位

    relative--以父级为参考点,trbl辅助定位,如果有padding 以内容区左上角辅助定位

    3.有父级,并且父级设置了position属性

    absolute ---以父级为参考点,trbl辅助定位,如果有padding  还是以父级左上角辅助定位

    relative--以父级为参考点,trbl辅助定位,如果有padding 以内容区左上角辅助定位

    4.文档流

    absolute ---脱离文档流,站着排队,人一走,位置就没了。

    relative--不脱离文档流,取号排队,人一走,位置还在。会占着那个坑,即使给div设置top属性

    总结:如果用定位来布局页面,父级元素的position属性必须为relative,因为absolute 需要以浏览器左上角为参考点,,trbl辅助定位 ,当前面的布局发生了改变,会产生影响!

    而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用relative,计算的时候不要忘记计算padding的值。

    ---以上需要自己写几个简单的例子证明下。-

  • 相关阅读:
    flutter-布局(水平和垂直)
    flutter-GridView(网格列表)
    flutter-ListView(列表组件)
    flutter-图片组件(Image)的使用
    flutter-container-容器
    flutter-hello flutter 并且修改字体
    nginx
    初步学习next.js-7-打包
    初步学习next.js-6-使用antd
    初步学习next.js-5-编写css样式和lazyloading
  • 原文地址:https://www.cnblogs.com/qianduanxiaocaij/p/4898039.html
Copyright © 2011-2022 走看看