定位执行的逻辑

定位执行逻辑：

        1：position 把元素从布局流中拿出来

        2：确定参照物（absolute参照物是已经定位的最近的父元素、）

        3：给元素固定位置的坐标（left right top bottom）

 

position定位属性 (检索或者设置元素的定位方式)

        属性值：

            static 默认值 （忽略所元素添加的方位属性：left right top bottom）

            absolute 绝对定位

                a:脱离布局流，不占据空间。

                b:参照物：相对于已经定位的，离当前定位的元素最近的父元素。

                c:如果父元素都没定位的情况下，则是以html根元素进行定位。

            relative 相对定位

                a:占据空间（会保留初始的位置）

                b:参照物：自身默认的位置。

 

包含块的设置：（html就是一个大的包含块）

        当定位的时候：

            给父元素添加position:relative;让父元素形成参照物(包含块)

            然后给要做的定位的元素添加position:absolute;

绝对定位与相对定位的区别：

        1：参照物不同

            absolute 已经定位的父元素

            relative 自身默认位置

        2：是否破坏布局流

            absolute 不占据空间破坏布局流

            relative 占据空间不破坏布局流

　　　3：z-index:(控制定位元素的层次关系。属性值为一个数字，数值越大，层次越高。能接收负数)

    默认值为auto;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         .box{
12             width:800px;
13             height:500px;
14             background:orange;
15             position: relative;
16         }
17         h3,h4,h2{
18             width:200px;
19             height:200px;
20             text-align:center;
21             line-height:200px;
22             font-size:60px;
23             font-weight:900;
24             color:#fff;
25             float:left;
26         }
27         h2{
28             background:#000;
29         }
30         h3{
31             background:blue;
32             position:absolute;
33             left:30px;top:50px;
34         }
35         h4{
36             background:green;
37         }
38     </style>
39 </head>
40 <body>
41     <div class="box">
42         <h2>1</h2>
43         <h3>
44             <em></em>
45         </h3>
46         <h4>3</h4>
47     </div>
48 </body>
49 </html>

 如何让一个元素在浏览器窗口左右上下居中?

　　方法1：position：fixed；

　　　　　　left：50%;

　　　　　　top:50%;

　　　　　　margin-left:宽度的一半；

　　　　　　margin-top:宽度一半；

　　方法2：position：fixed；

　　　　　　left：0；top：0；

　　　　　　right：0；bottom：0:；

　　　　　　margin：auto；

posted @ 2019-03-09 15:35  초심  阅读(166)  评论(0)    收藏  举报