CSS之定位

css学习<六>

定位

定位就是将盒子定位到某一位置,自由漂浮在其他盒子上。那么就有了这样三个比喻。

	标准流在最底层 (海底)  
	浮动 的盒子 在 中间层  (海面)  
	定位的盒子 在 最上层  (天空)

定位由两部分组成定位 = 定位模式 + 边偏移

1.定位模式

在 CSS 中,通过 position 属性定义元素的定位模式,语法如下:

选择器 { position: 属性值; }

定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。

语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位
2.边偏移

在 CSS 中,通过 topbottomleftright 属性定义元素的边偏移

边偏移属性示例描述
toptop: 80px顶端偏移量,定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量,定义元素相对于其父元素下边线的距离
leftleft: 80px左侧偏移量,定义元素相对于其父元素左边线的距离
rightright: 80px右侧偏移量,定义元素相对于其父元素右边线的距离

定位模式详解

  • static静态定位

静态定位是元素的默认定位方式,无定位的意思。

  • relative相对定位

相对定位是元素相对于它 原来在标准流中的位置 来说的
特点:

  1. 相对于 自己原来在标准流中位置来移动的

  2. 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。

案例

    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .two{
            position: relative;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #000000;
        }
        .three{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

在这里插入图片描述

  • absolute 绝对定位

    绝对定位是元素以带有定位的父级元素来移动位置

特点:

  1. 完全脱标 —— 完全不占位置;
  2. 将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
  3. 父元素没有定位,则以浏览器为准定位。

案例

    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .two{
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #000000;
        }
        .three{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

在这里插入图片描述

  • fixed固定定位
    固定定位绝对定位的一种特殊形式。

特点:

  1. 完全脱标 —— 完全不占位置;
  2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置;
    跟父元素没有任何关系;单独使用的
    不随滚动条滚动。

案例

     <div class="two">
        
    </div>
    <style>
        body{
            height: 1000px;
        }
        .two{
            position: fixed;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #000000;
        }
        </style>

在这里插入图片描述
可以发现黑色方块不会随着滚动条而消失,一直固定在相对于浏览器的位置。

子绝父相

  1. 子绝父相 —— 子元素使用绝对定位父元素使用相对定位
  2. 与浮动的对比
    • 绝对定位:脱标,利用边偏移指定准确位置
    • 浮动:脱标,不能指定准确位置,让多个块级元素在一行显示

案例:在这里插入图片描述
例如淘宝轮播图,左右切换的<、>图标,因为图标是盖住下方的盒子的,所以我们首先应该去采用定位,为什么不采用浮动呢?虽然浮动是在标准流上方,但如果是轮播图片浮动那么就不会显示切换图标,如果是图标浮动那么更不合理了。都浮动只会让他们显示在一行。所以这时候我们只能去用定位

那么为什么必须使用子绝父相呢?

  1. 当子盒子使用绝对定位的时候,那么他会脱离标准流,可以指定位置。因为在使用绝对定位的时候父盒子必须有定位,占有位置。

  2. 当父盒子使用相对定位的时候,父盒子无论移动与否何时都占有原本的位置上,所以子盒子也不会因为父盒子的位置变化而在随之变化。

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页