15、定位(Position)

定位(Position)

  • 相关概念
  • 定位组成
  • 使用

一、相关概念

1.1、什么是定位?

定位:将一个元素定在某一个位置(坐标)。

1.2、为什么要使用定位?

  1. 定位可以让多个块级元素在一行显示
  2. 定位可以让一个元素在某一个盒子内固定在任意位置,且可以覆盖其它元素。

二、定位组成

  定位由两个基本元素组成:定位模式(position)和边偏移(top、right、bottom、left),其中定位模式决定了元素在文档中的定位方式,而边偏移则决定了元素的最终位置(坐标)

2.1、定位模式(position)

  • static:静态定位(默认),即没有定位的意思,元素遵循标准流的摆放特性。且没有边偏移
  • relative:相对定位
  • absolute:绝对定位
  • fixed:固定定位

2.2、边偏移(top、right、bottom、left)

  • top:顶端偏移量,即元素距离其父元素上边线的距离
  • left:左侧偏移量, 即元素距离其父元素左边线的距离
  • bottom:底部偏移量, 即元素距离其父元素下边线的距离
  • right:右侧偏移量, 即元素距离其父元素右边线的距离

三、使用

3.1、相对定位(relative)

  1. 元素相对于其原先位置移动(参照点是自身原先的位置)
  2. 元素移动后,其原先在标准流中的位置继续保留,后面的元素仍以标准流的方式对待它(不脱标)
<body>
    <hr/>
    <div id="div1">第一个盒子</div>
    <div id="div2">第二个盒子</div>
</body>
#div1{
    width:200px;
    height: 100px;
    background-color: hotpink;
    position:relative;/*相对定位*/
    left: 100px;
    top: 50px;
}
#div2{
    width:200px;
    height: 100px;
    background-color: green;
}

在这里插入图片描述

3.2、绝对定位(absolute)

  1. 元素是相对于其父元素(有定位的父级元素)来移动位置的。(参照点是父元素)
  2. 如果元素没有父元素或父元素没有定位(position:static),则相对于浏览器来定位。
  3. 绝对定位不再占有原先标准流中的位置(脱标)
<body>
    <hr/><!--会影响红盒子的位置,不会影响绿盒子的位置-->
    <div id="outer1">
        <div>红盒子</div>
        绝对定位会脱离标准流<br/>
        不再占有原先标准流中的位置
    </div>
    <div id="outer2">绿盒子</div>
</body>
#outer1{
    position:relative;/*相对定位*/
}
#outer1>div{/*红色盒子*/
    width:200px;
    height: 100px;
    background-color: hotpink;
    position:absolute;/*绝对定位*/
    left:50px;
    top:50px;
}
#outer2{/*绿色盒子*/
    width:200px;
    height: 100px;
    background-color: green;
    position:absolute;/*绝对定位*/
    left:100px;
    top:100px;
}

在这里插入图片描述

3.3、固定定位(fixed)

  1. 以浏览器的可视窗口作为参照点移动元素。不受父元素和滚动条的影响
  2. 固定定位是脱离标准流的,不再占有原先标准流中的位置。
<body>
     <div>TOP↑</div>
     <p>固定定位会脱离标准流</p>
</body>
body>div{
    width: 100px;
    height: 200px;
    background-color: hotpink;
    text-align: center;
    position:fixed;/*固定定位*/
    left: 100px;
    top:100px;
}

在这里插入图片描述

3.4、定位的叠放次序(z-index)

在使用定位布局时,不可避免的会碰到盒子重叠的情况。为了控制盒子的叠放顺序,可以使用z-index属性来控制。

  1. 数值可以是正整数、负整数、0。默认是auto。数值越大,盒子越靠上
  2. 如果属性值相同,则根据元素在HTML文档中的位置,后来者居上
<body>
    <div id="div1">顶部盒子</div>
    <div id="div2">中间盒子</div>
    <div id="div3">底部盒子</div>
</body>
#div1{
    width:100px;
    height: 80px;
    background-color: blue;
    text-align: right;
    position:absolute;/*默认left:0   top:0*/
    z-index: 3;
}
#div2{
    width:200px;
    height: 140px;
    background-color: green;
    text-align: right;
    position:absolute;/*默认left:0   top:0*/
    z-index: 2;
}
#div3{
    width:300px;
    height: 200px;
    background-color: hotpink;
    text-align: right;
    position:absolute;/*默认left:0   top:0*/
    z-index: 1;
}

在这里插入图片描述

四、小技巧

4.1、绝对定位的盒子水平居中

  • 在绝对定位中使用margin:0 auto是没办法实现水平居中的
<body>
    <div id="outer">
        <div>水平居中</div>
    </div>
</body>
#outer{
    width:400px;
    height: 300px;
    border:2px solid black;
    position:relative;
}
#outer>div{
    margin-left: -40px;/*小盒子宽度的一半*/
    width: 80px;
    height: 60px;
    background-color: hotpink;
    position:absolute;
    left:50%;
    bottom:0;
}

在这里插入图片描述

4.2、固定到版心右侧

  1. positon:fixed
  2. left:50%
  3. top:随意
  4. margin-left:版心宽度一半
    代码(略)
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值