关于HTML文件定位问题的基础理解

该段代码为各元素之间的父子关系，具体div的style定义以下阐述：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="gb2312">
 5         <title>盒模型及定位</title>
 6         <link rel="stylesheet" type="text/css" href="./resource/css/style.css">
 7         <link rel="stylesheet" type="text/css" href="./resource/css/htmlBase.css">
 8     </head>
 9     
10     <body>
11         <div class="divFirst">
12             <div class="divChild1"></div>
13             <div class="divChild1"></div>
14         </div>
15         <div class="divSecond">
16             <div class="divChild2"></div>
17         </div>
18         <div class="divThird">
19             <div class="divChild3"></div>
20         </div>
21     </body>
22 </html>

 

<1>static: 为默认位置。位置设置为static的元素，元素根据父级的“内容区域原始点”为原始点流式布局得到位置，忽视top、bottom、left、right和z-index等属性的定义。

 1 .divFirst {
 2     background: gray; /*position默认为static*/
 3     width: 10%;
 4     height: 20%;
 5 }
 6 
 7 .divSecond {
 8     background: lightgray;
 9     width: 11%;
10     height: 20%;
11 }
12 
13 .divThird {
14     background: pink;
15     width: 12%;
16     height: 20%;
17 }

结果如图：

<2>relative:位置设置为relative的元素，可定位相对父级元素的“内容区域原始点”为原始点。此元素的位置可通过left、right、top和bottom属性来规定相对位置。

　　　　　　注：left、right、top和bottom属性的设置不影响之后元素的位置确定，，依然为流式布局，存在影响的仅为该元素的高度。

 1 .divFirst {
 2     background: gray; 
 3     width: 10%;
 4     height: 20%;
 5 }
 6 
 7 .divSecond {
 8     background: lightgray;
 9     width: 11%;
10     height: 20%;
11 
12     position: relative;/*该处为更改代码*/
13     left: 10px;
14     top: 10px;
15 }
16 
17 .divThird {
18     background: pink;
19     width: 12%;
20     height: 20%;
21 }

结果如图:

<3>absolute:位置设置为relative的元素，位置分为两种情况:

　　　　1)对于父级的位置类型为static，默认依据浏览器窗口的“内容区域原始点”为原始点。此元素的位置可通过left、right、top和bottom属性来规定。

　　　　2)对于父级的位置类型为relative、absolute或fiexd，则依据父级的“内容区域原始点”为原始点。此元素的位置可通过left、right、top和bottom属性来规定。

第一种情况：

.divFirst {
    background: gray; 
    width: 10%;
    height: 20%;
}

.divSecond {
    background: lightgray;
    width: 11%;
    height: 20%;
}

.divThird {
    background: pink;
    width: 12%;
    height: 20%;
}

.divChild1 {
    background: red;
    width: 50%;
    height: 50%;
}

.divChild2 {
    background: green;
    width: 50%;
    height: 50%;
}

.divChild3 {
    background: blue;
    width: 20%;
    height: 50%;
    
    position: absolute;/*该处为更改代码*/
    top: 50px;
    left: 50px;
}

结果如图：

第二种情况：

 1 .divFirst {
 2     background: gray; 
 3     width: 10%;
 4     height: 20%;
 5 }
 6 
 7 .divSecond {
 8     background: lightgray;
 9     width: 11%;
10     height: 20%;
11 }
12 
13 .divThird {
14     background: pink;
15     width: 12%;
16     height: 20%;
17 
18     position: relative;/*该处为更改代码*/
19 }
20 
21 .divChild1 {
22     background: red;
23     width: 50%;
24     height: 50%;
25 }
26 
27 .divChild2 {
28     background: green;
29     width: 50%;
30     height: 50%;
31 }
32 
33 .divChild3 {
34     background: blue;
35     width: 20%;
36     height: 50%;
37     
38     position: absolute;/*该处为更改代码*/
39     top: 50px;
40     left: 50px;
41 }

结果如图：

<4>fiexd: 位置设置为fiexd的元素，可定位于相对于浏览器窗口的“内容区域原始点”为原始点。此元素的位置可通过left、right、top和bottom

　　　　属性来规定，不论窗口滚动与否，元素都会留在那个位置。

 1 .divFirst {
 2     background: gray; 
 3     width: 10%;
 4     height: 20%;
 5 
 6     position: fixed;/*该处为更改代码*/
 7 }
 8 
 9 .divSecond {
10     background: lightgray;
11     width: 11%;
12     height: 20%;
13 }
14 
15 .divThird {
16     background: pink;
17     width: 12%;
18     height: 20%;
19 }

 


　　　　

posted @ 2018-03-24 16:04  有梦想的路飞  阅读(194)  评论(0)    收藏  举报