zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    iOS 测试
    runtime 大牛必备
    集成微信支付
    webview的使用以及js调用OC传参
    ScrollView的坑
    iOS 字符串 数组 字典 操作!
    Git的使用场景
    什么是Runloop?
    Cannot subclass final class class com.sun.proxy.$Proxy16
    <%@page include%>、<%@include%>、<jsp:include>三者之间的本质区别
  • 原文地址:https://www.cnblogs.com/Tracy-zdy/p/3764928.html
Copyright © 2011-2022 走看看