天天看點

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

css position 詳解

                                 圖1

第二個span标簽是以父元素body為定位的,距離左側100像素,距離上側200像素,但是用ie的調試工具檢視了body的position卻是static。

疑問:這是否和w3c上說的相違背呢???  

轉載于:https://www.cnblogs.com/xiaobaodejimama/p/7840533.html

繼續閱讀