HTML——CSS——定位（笔记）

1.为什么使用定位

定位可以让盒子自由的在另外一个盒子的内部移动位置或者固定在屏幕中的某个位置，并且可以压住其他的盒子。

2定位使用方式

定位=定位模式+边偏移

2.1定位模式

1.静态定位static

2.相对定位relative（常用）

3.绝对定位absolute（常用）

4.固定定位fixed

2.2边偏移

(定义元素相对于其父元素某个方向上的距离)
top属性     
bottom属性  
left属性
right属性

3.使用定位

3.1静态定位static

1.默认的定位方式，无定位的意思，无实际含义
选择器{position:static;}
2特点：按照标准流布局，无偏移

3.2相对定位relative(常用！)

特点1：

相对定位是指元素在移动位置的时候，相对于它原来的位置。
选择器{position:relative;}

特点2：

原来在标准流的位置继续占有，保留原来的位置(后面的盒子依然是标准流，所以没有脱标！)

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .one{
                width: 150px;
                height: 150px;
                background-color: red;
                position: relative;
                top: 100px;
                left: 100px;
            }
            .two{
                width: 150px;
                height: 150px;
                background-color: yellow;
            }
            
        </style>
    </head>
    <body>
         <div class="one"></div>
         <div class="two"></div>
    </body>
</html>

3.3绝对定位absolute(常用！)

注意点1：没有父级或父级无定位情况

注意点2：移动位置的时候是相对于祖先元素来说的

绝对定位特点1：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

案例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
             .one{
                width: 200px;
                height: 200px;
                background: red;
                position: absolute;             
                top: 10px;
                left: 10px;
            /*top: 10px;
            left: 10px;*/
             }
            
        </style>
    </head>
    <body>
         <div class="one"></div>
         
    </body>
</html>

案例2：<如果父级元素没有定位，则以浏览器为基准>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        .father{
            width: 600px;
            height: 600px;
            background-color: #00BFFF;
        }
         .one{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            /*top: 10px;
            left: 10px;*/
            top: 10px;
            right: 10px;
         }
            
        </style>
    </head>
    <body>
        <div class="father">
            <div class="one"></div>
        </div> 
    </body>
</html>

绝对定位特点2：

如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。

案例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        .father{
            position: relative; /** 父元素相对定位**/
            width: 600px;
            height: 600px;
            background-color: #00BFFF;
        }
         .one{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 10px;
            right: 10px;
         }
            
        </style>
    </head>
    <body>
        <div class="father">
            <div class="one"></div>
        </div> 
    </body>
</html>

案例2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        .grandfather{
            position: relative; /** 爷爷有定位定位**/
            width: 700px;
            height: 700px;
            background-color: yellow;
        }
        .father{
            width: 600px;
            height: 600px;
            background-color: #00BFFF;
        }
         .one{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 10px;
            right: 10px;
         }
            
        </style>
    </head>
    <body>
        <div class="grandfather">
            <div class="father">
                <div class="one"></div>
            </div> 
        </div>
    </body>
</html>

绝对定位特点3：

绝对定位不再占有原先的位置(脱标)

3.4绝对/相对定位总结

绝对定位和相对定位的使用场景：

(1)子绝父相:

子级使用绝对定位，父级需要使用相对定位

(分析：父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位)

案例：

作业：

3.5固定定位fixed

元素固定于浏览器中的某个位置，使用场景：浏览器页面滚动时位置不会改变
选择器{position:fixed;}

固定定位特点1：

以浏览器的可视窗口为参照点移动元素（缩小浏览器大小）