zoukankan      html  css  js  c++  java
  • css position 详解

    仅供自己参考使用。

    position 有四个值

    (1)absolute:

      以下时w3c中的描述:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

      对以上横线处有不解之处。以下代码对第二个<span>标签设置了position:absolute属性,thank you 也按照预期的展示了。如图1

      

     1 <!doctype html>
     2  2 <html>
     3  3     <head>
     4  4         <meta charset="utf-8">
     5  5         <script type="text/javascript" src="js/jquery.js"></script>
     6  6         
     7  7         <style>
     8  8              html,body{
     9  9                 width: 100%;
    10 10                 height: 100%;
    11 11                 margin: 0px;
    12 12                 padding: 0px;
    13 13                 background-color: pink;
    14 14                 overflow: hidden;
    15 15              }
    16 16           </style>
    17 17         <script type="text/javascript">
    18 18               $(function(){
    19 19                   $("span:last").css({
    20 20                       "position":"absolute",
    21 21                       "left":"200px",
    22 22                       "top":"100px",
    23 23                       "background-color":"red"
    24 24                   });
    25 25                   var a = "a";
    26 26               });
    27 27         </script>
    28 28 
    29 29     </head>
    30 30     <body>
    31 31         <p>hello world</p>
    32 32         <p>my name is mutou</p>
    33 33         <span>how are you</span><span>thank you</span>
    34 34     </body>
    35 35 </html>
    View Code

                                     图1

    第二个span标签是以父元素body为定位的,距离左侧100像素,距离上侧200像素,但是用ie的调试工具查看了body的position却是static

    疑问:这是否和w3c上说的相违背呢???  

  • 相关阅读:
    PowerShell美化
    Open Live Writer
    Docker学习笔记
    [Caliburn.Micro专题][1]快速入门
    Git
    自助报表是什么东西?能不能利用自助报表把报表事务推给业务人员?
    什么是报表工具?和 EXCEL 有什么区别?
    报表为什么会没完没了?怎么解决这个问题?
    How Python Handles Big Files
    完成一个预测建模项目一般需要多长时间?
  • 原文地址:https://www.cnblogs.com/xiaobaodejimama/p/7840533.html
Copyright © 2011-2022 走看看