• CSS中position的几个属性值

    position的四种取值 ：

        static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定
    relative:relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。
        absolute:absolute绝对定位，直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。标准是说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。
        fixed:fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。可惜的是ie还不支持

    relative,absolute,fixed需要指定具体位置
        relative,absolute,fixed如果不指定它的top,left等属性，那么它的position实际上依然是static。使用了relative,absolute,fixed就必须指定具体的位置。
    Java代码 复制代码 收藏代码CSS中position的几个属性值
    1. <html >      
    2. <head>      
    3. <meta http-equiv="content-type" content="text/html" charset="gb2312">      
    4. <style> *{margin:0;padding:0} </style>       
    5. </head>       
    6. <body>       
    7.     <div style="position:absolute;height:400px;400px;background:yellow;left:80px;top:80px;">      
    8.         <div style="position:absolute;height:200px;200px;background:red;left:100px;top:80px;"></div>      
    9.         <div style="position:relative;height:200px;200px;background:blue;left:186px;top:186px;"></div>      
    10.         <div style="position:fixed;height:140px;140px;background:black;left:20px;top:20px;"></div>   
    11.   
    12.     <!--黑色（black）的是fixed的，所以它直接以浏览器窗口开始计算left和top的值   
    13.             红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值，   
    14.             只是因为有一个是absolute所以产生了重叠效果，没有被另外一个挤走。    
    15.     
    16.          -->      
    17.     </div>      
    18.     <div style="position:static;height:140px;140px;background:brown;left:220px;top:220px;"></div>      
    19.     <!--紫色(brown)的是static的，所以它的left和top没有起作用，一直跑到最上面去了    
    20.           同时我也明白了另外一个道理，因为默认的类型都是static，所以当我们的页面长度等定位的不合理时一个会把一个挤走。    
    21.         -->   
    22.   
    23. </body>       
    24. </html>   
    <html > <head> <meta http-equiv="content-type" content="text/html" charset="gb2312"> <style> *{margin:0;padding:0} </style> </head> <body> <div style="position:absolute;height:400px;400px;background:yellow;left:80px;top:80px;"> <div style="position:absolute;height:200px;200px;background:red;left:100px;top:80px;"></div> <div style="position:relative;height:200px;200px;background:blue;left:186px;top:186px;"></div> <div style="position:fixed;height:140px;140px;background:black;left:20px;top:20px;"></div> <!--黑色（black）的是fixed的，所以它直接以浏览器窗口开始计算left和top的值 红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值， 只是因为有一个是absolute所以产生了重叠效果，没有被另外一个挤走。 --> </div> <div style="position:static;height:140px;140px;background:brown;left:220px;top:220px;"></div> <!--紫色(brown)的是static的，所以它的left和top没有起作用，一直跑到最上面去了 同时我也明白了另外一个道理，因为默认的类型都是static，所以当我们的页面长度等定位的不合理时一个会把一个挤走。 --> </body> </html>
     


    有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。我一开始也无能为力，后来发现只要把其上一级的样式属性 position设置为relative就可以了。
    也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。
    例如如下A-B的嵌套结构
    <div id="A">
    <div id="B">
    </div>
    </div>


        有时候我们需要针对某一个容器的悬浮效果,这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。只要把其上一级的样式属性 position设置为relative就可以了。
    也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。
    例如如下A-B的嵌套结构
    Java代码 复制代码 收藏代码CSS中position的几个属性值
    1. <div id="A">    
    2. <div id="B">    
    3. </div>    
    4. </div>   
    <div id="A"> <div id="B"> </div> </div>

        当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。


    <img> 都有width属性，如img.width 值没有px 但style.width 是有px的，必须用parseInt去除，不然会报错，当<img>定义了固定宽度时，可用var image = new Image();
    image.src = img.src;得到原图像的原大小
    Java代码 复制代码 收藏代码CSS中position的几个属性值
    1. <html >      
    2. <head>      
    3. <meta http-equiv="content-type" content="text/html" charset="gb2312">      
    4. <style> *{margin:0;padding:0} </style>       
    5. </head>       
    6. <body>       
    7.       
    8. <div id="Canvas" style="background-color:#cccccc;height:266px;284px">    
    9. <table id="Crop" cellpadding="0" cellspacing="0" border="0" style="border: 1px solid green">    
    10. <tr>    
    11. <td style="height: 107px" colspan="3" class="Overlay"></td>    
    12. </tr>    
    13. <tr>    
    14. <td style=" 105px" class="Overlay"></td>    
    15. <td style=" 90px; height: 60px; border- 1px; border-style: solid; border-color: white;"></td>    
    16. <td style=" 105px" class="Overlay"></td>    
    17. </tr>    
    18. <tr>    
    19. <td style="height: 107px" colspan="3" class="Overlay"></td>    
    20. </tr>    
    21. </table>    
    22.   
    23.   
    24. <div style="position: relative;background-color:green; left:0; top: 0; border: 1px solid red" id="IconContainer">    
    25. <img id="icon" src="1.gif" style="border- 0px; position: relative; left: 0px; top: 0px">    
    26. </div>   
    27. <div style="position: relative;background-color:red; left:16; top:16">fdsadsa</div>    
    28. </div>    
    29.     
    30. <script type="text/javascript">    
    31. <!--    
    32. var canva = document.getElementByIdx_x("Canvas");    
    33. var   obj = document.getElementByIdx_x("icon");    
    34. var image = new Image();    
    35. image.src = obj.src;    
    36. alert(canva.style.width) //284   
    37. alert(image.width)       //28   
    38. alert(obj.width);        //28   
    39. alert(obj.style.width);  //   
    40. obj.style.left = (parseInt(canva.style.width) - image.width )/2 + "px";    
    41. obj.style.top = -(parseInt(canva.style.height) + image.height)/2 + "px";    
    42. //-->    
    43. <!--   
    44. 图片居中，这类问题一般都是算两者的width和height，再求left和top，都要求（最好放一起），position设为relative ,相对自己在父元素的原始位置的位移，向右下角移动为正    
    45. -->   
    46. </script>    
    47.   
    48. </body>       
    49. </html>   
  • 相关阅读:
    字符编码与解码详解
    【Java反射机制】用反射改进简单工厂模式设计
    数据结构
    根据 中序遍历 和 后序遍历构造树（Presentation）（C++）
    【动态规划】记忆搜索（C++）
    Linux环境下安装中山大学东校区iNode客户端
    webpack前端开发环境搭建
    CSS中line-height继承问题
    MySQL中MyISAM与InnoDB的主要区别对比
    JavaScript中易混淆的DOM属性及方法对比
  • 原文地址：https://www.cnblogs.com/moonfans/p/2990181.html
Copyright © 2020-2023  润新知