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>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值