zoukankan      html  css  js  c++  java

  • css3——position定位详解

    最近热衷于前端的开发，因为突然发现虽然对于网站、应用来说，功能处于绝对重要的地位，但是用户体验对于用户来讲同样是那么的重要，可以说是第一印象。最近在开发当中发现以前对于css中的position的理解有些偏颇，在这里分享一下这几天的学习。

    首先总体介绍一下接下来要分析的position属性的两个值：absolute和relative（绝对定位和相对定位），

    绝对定位：1、当某元素使用绝对定位并且未设置top，left的值时，实际上并未真正脱离文档流，2、使用绝对定位并且设置了top，left时，这才脱离了文档流，并以最外层body元素作为父容器，

    相对定位：1、当某元素使用相对定位时，无论设不设置top，left的值，都不会脱离文档流

    接下来以实验论证我的观点，贴出一段实验小代码

    <!DOCTYPE html>  
  
<html>  
<head >  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title></title>  
</head>  
    <body onload="init();">  
        <div style=" 400px;height:400px;border: cadetblue 2px solid;">  
            <div style=" 300px;height: 30px;border: 2px solid red;">  
                  
            </div>  
            <div style="position: absolute; 80px;height: 30px;border: 2px solid orange;" id="absolute">  
                  
            </div>  
            <div style="position: relative; 160px;height: 60px;border: 2px solid blueviolet;left: 150px;" id="relative">  
                  
            </div>  
        </div>  
    </body>  
    <script>  
        function init(parameters) {  
            var absoluteStr = "absolute :top=" + absolute.offsetTop + ",left=" + absolute.offsetLeft;  
            absolute.innerHTML = absoluteStr;  
              
            var relativeStr = "relative :top=" + relative.offsetTop + ",left=" + relative.offsetLeft;  
            relative.innerHTML = relativeStr;  
        }  
    </script>  
</html>



    相信这个就不用多做解释了，外层一个div，里面有三个div，第一个是普通div，接下来一个id是absolute，另一个是relative，摆明了就是分别测试absolute和relative的。

    我们在init函数中分别将absolute和relative的div的内容显示两个div分别的top和left

    最外层div距离浏览器上边框10px，里面第一个（红色）div高度为30，在absolute和relative中可以看出top的值是一样的，那么是不是就说明无论是absolute还是relative在这个时候都未脱离文档流，因为他们被上面第一个div挤下来了，接下来分别将absolute和relative两个div设置 top=100px,那么结果如下：

    由上图可以看出，设置了top之后，absolute这个元素的top值是100px，而relative的top值却是144px，说明absolute这个元素是脱离了文档流以body为父元素的，而relative中的144=100+44，说明relative是以外层div为父容器，并且未脱离文档流，在上一个（红色）div的基础上向下平移了100px，由此证明了以上论断。

    position属性值还有fixed，和默认值static，以及top，left的用法还有很多注意事项，以后慢慢再说。
  • 相关阅读:
    我的友情链接
    我的友情链接
    BUMO：超级节点共建接口
    OpenStack 对接 Ceph 环境可以创建卷但不能挂载卷的问题
    零知识证明: 抛砖引玉
    比特币原理
    区块链零知识证明：STARKs，Part-3：攻坚（下）
    什么是zkSNARKs：谜一般的“月亮数学”加密，Part-1
    什么是zkSNARKs：谜一般的“月亮数学”加密，Part-2
    STARKs, Part I: 多项式证明
  • 原文地址：https://www.cnblogs.com/Simon-xm/p/3949879.html
Copyright © 2011-2022 走看看