• css元素定位样式


    曾经写网页,学css整体上不难,但就是元素定位,始终一知半解,直到今天,本着实践出真知的理念,经过认真测试,总结出了如下结论。

    css 定位: position
    static : 默认静止定位,元素在正常的文档流中无法移动定位。
    absolute :独立元素,元素从文档流中脱离,会相对于父层(static定位的父层除外)移动定位。
    relative : 相对定位,相对本身的位置移动定位,效果等同于相对于父层移动定位。
    fixed: 固定定位,相对于窗口移动定位。

    注:
    1、移动定位是指通过 top,bottom,left,right属性来移动元素位置。

    2、任何元素都有相对于父层定位的特性,所以当不用方向移动定位属性,而只用 margin 定位,则必然是相对的位移。

    3、absolute 是“独立的,绝对”的意思,我觉得应该是取“独立的”意义更好理解。它所达到的效果就是元素从文档流中脱离,印证了独立存在的意义。

    测试结果如下(static元素就不测试):


    子元素 ( 相对于 =>) 父元素
    absolute => static 绝对
    fixed => static 绝对
    relative => static 相对

    absolute => absolute 相对
    fixed => absolute 绝对
    relative => absolute 相对

    absolute => relative 相对
    fixed => relative 绝对
    relative => relative 相对

    absolute => fixed 相对
    fixed => fixed 绝对
    relative => fixed 相对

    <div class="size300_300" style="position:static; margin-left:100px;">
        <div class="size100_100" style="position:absolute; top:10px; ">son</div>
    </div>

  • 相关阅读:
    临时更换swap优先级
    设计一个百万级的消息推送系统----转
    使用apache cxf实现webservice服务
    如何成为一位「不那么差」的程序员---转
    轻量级web框架cicada----(转)
    shiro学习笔记
    java编程调试技巧
    zookeeper学习总结
    Kafka入门
    kafka 的经典教程
  • 原文地址:https://www.cnblogs.com/Tracy-zdy/p/3764928.html
Copyright © 2020-2023  润新知