CSS定位总结

CSS定位总结

1.定位的基本介绍

1.1 网页常见布局方式
1. 标准流
a. 块级元素独占一行 → 垂直布局
b. 行内元素/行内块元素一行显示多个 → 水平布局
2. 浮动
a. 可以让原本垂直布局的 块级元素变成水平布局
3. 定位
a. 可以让元素自由的摆放在网页的任意位置
b. 一般用于 盒子之间的层叠情况
1.2 定位的常见应用场景
1. 可以解决盒子与盒子之间的层叠问题
• 定位之后的元素层级最高，可以层叠在其他盒子上面
2. 可以让盒子始终固定在屏幕中的某个位置

2. 定位的基本使用

2.1 定位初体验
	1. 需求：页面中两个盒子，要求完成图片的效果，可以如何完成？
		针对于盒子与盒子之间的层叠问题，推荐使用定位完成！
2.2 使用定位的步骤
    1. 设置定位方式 属性名:属性值
    属性名：position
    常见属性值：
            static      静态定位
            relative    相对定位
            absolute    绝对定位
            fixed       固定定位
     2. 设置偏移值
     偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
     选取的原则一般是就近原则 （离哪边近用哪个）

    方向    属性名      属性值      含义
    水平    left        数字+px     	距离左边的距离
    水平    right       数字+px     	距离右边的距离
    垂直    top         数字+px     	距离上边的距离
    垂直    buttom      数字+px     距离下边的距离

3. 静态定位

3.1 静态定位
     介绍：静态定位是默认值，就是之前认识的标准流。
     代码：position:static
     注意点：
    1. 静态定位就是之前标准流，不能通过方位属性进行移动
    2. 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
小结：
    静态定位能通过方位属性进行移动吗？
    不能，静态定位的元素就是默认标准流的情况

4. 相对定位

4.1 相对定位
     介绍：以自己所在位置定位，相对于自己之前的位置进行移动
     代码：position:relative
    特点：
    1. 需要配合方位属性实现移动
    2. 相对于自己原来位置进行移动
    3. 在页面中占位置 → 没有脱标
    应用场景：
    4. 配合绝对定位组CP（子绝父相）
    5. 用于小范围的移动
 例：

<style>
        .one{
            width: 150px;
            height: 150px;
            background-color: pink;
        }
        .two{
            /* 添加相对定位 */
            position: relative;
            left: 30px;
            bottom: 30px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .three{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

<!-- 先定义三个小盒子 -->
    <div class="one"></div>
    <!-- 给第二个盒子添加相对定位 -->
    <div class="two"></div>
    <div class="three"></div>

5. 绝对定位

5.1 绝对定位
    ➢ 介绍：相对于非静态定位的父元素进行定位移动
    （先找到已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位；
        如果有父级，但是父级没有定位，以浏览器窗口为参照进行定位）
    ➢ 代码：position:absolute
    ➢ 特点：
    1. 需要配合方位属性实现移动
    2. 默认相对于浏览器可视区域进行移动
    3. 在页面中不占位置 → 已经脱标
    ➢ 应用场景：
    1. 配合绝对定位组CP（子绝父相）
5.2 绝对定位到底相对于谁进行偏移
    ➢ 绝对定位相对于谁移动？
    1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
    2. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
   例:父级有定位

<style>
        .big{
            /* 给父级添加 */
            position: relative;
            width: 400px;
            height: 400px;
            background-color: aquamarine;
        }
        .one{
            /* 添加相对定位 */
            position: absolute;
            /* 结果显示：相对于父级，距离左边30px,距离底部部30px*/
            left: 30px;
            bottom: 30px; 
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

<!-- 先定义两个小盒子 且父级元素有定位-->
    <div class="big">
        <!-- 给个盒子添加相对定位 -->
        <!-- 结果：1.第二个盒子脱标不占位
                   2.第二个盒子变成行内块-->
        <div class="one"></div>
    </div>

例：父级无定位

<style>
        .big{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
        }
        .one{
            width: 150px;
            height: 150px;
            background-color: pink;
        }
        .two{
            /* 添加相对定位 */
            position: absolute;
            /* 结果显示：相对于屏幕，距离左边30px,距离顶部30px*/
            left: 30px;
            top: 30px; 
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>

<!-- 先定义三个小盒子 且父级元素没有定位-->
    <div class="big">
        <div class="one"></div>
        <!-- 给第二个盒子添加相对定位 -->
        <!-- 结果：1.第二个盒子脱标不占位
                   2.第二个盒子变成行内块-->
        <div class="two"></div>

6. 固定定位

6.1 固定定位  
    介绍：死心眼型定位，相对于浏览器进行定位移动
    代码：position:fixed
    特点：
    1. 需要配合方位属性实现移动
    2. 相对于浏览器可视区域进行移动
    3. 在页面中不占位置 → 已经脱标
    应用场景：
    4. 让盒子固定在屏幕中的某个位置
    例：

<style>
        .big{
            width: 200px;
            height: 700px;
            background-color: skyblue;
        }
        .one{
            position: fixed;
            top: 5px;
            left: 100px;

            width: 50px;
            height: 50px;
            background-color: brown;
        }
    </style>

<div class="big">
        <p>
            晚饭过后，火烧云上来了。霞光照得小孩子的脸红红的。大白狗变成红的了，红公鸡变成金的了。黑母鸡变成紫檀色的了。喂猪的老头儿在墙根靠着，笑盈盈地看着他的两头小白猪变成小金猪了。他刚想说：“你们也变了……”旁边走来个乘凉的人对他说：“您老人家必要高寿，您老是金胡子了。”天上的云从西边一直烧到东边，红彤彤的，好像是天空着了火。这地方的火烧云变化极多，一会儿红彤彤的，一会儿金灿灿的，一会儿半紫半黄，一会儿半灰半百合色。葡萄灰、梨黄、茄子紫，这些颜色天空都有，还有些说也说不出来、见也没见过的颜色。一会儿，天空出现一匹马，马头向南，马尾向西。马是跪着的，像等人骑上它的背，它才站起来似的。过了两三秒钟，那匹马大起来了，腿伸开了，脖子也长了，尾巴可不见了。看的人正在寻找马尾巴，那匹马变模糊了。　忽然又来了一条大狗。那条狗十分凶猛，在向前跑，后边似乎还跟着好几条小狗。跑着跑着，小狗不知哪里去了，大狗也不见了。接着又来了一头大狮子，跟庙门前的石头狮子一模一样，也那么大，也那样蹲着，很威武很镇静地蹲着。可是一转眼就变了，再也找不着了。一时恍恍惚惚的，天空里又像这个，又像那个，其实什么也不像，什么也看不清了。必须低下头，揉一揉眼睛，沉静一会儿再看。可是天空偏偏不等待那些爱好它的孩子。一会儿工夫，火烧云下去了。
        </p>
        <div class="one"></div>
    </div>