定位

定位

1.基本定义

在CSS中,position属性用于定义元素的定位模式,其基本语法格式如下:

选择器{position:属性值;}

position属性的常用值

  • static 自动定位(默认定位方式)
  • relative 相对定位,相对于其原文档流的位置进行定位
  • absolute 绝对定位,相对于其上一个已经定位的父元素进行定位
  • fixed 固定定位,相对于浏览器窗口进行定位

绝对定位和固定定位会变成行内块

2.相对定位relative:

相对定位是将元素相对于标准流的位置进行定位,当position属性的取值为relative时,可以将元素定位在相对位置

虽然可以改变其位置,但是它在文档流的位置依旧保留
注意:

  1. 相对定位可以通过边偏移移动位置,但是原来的所占的位置,继续占有。
  2. 每次移动的位置,是以自己的左上角为基点移动(相对于自己来移动位置)
    如果说浮动的主要目的是 让多个块级元素一行显示,那么定位的主要价值就是 移动位置, 让盒子到我们想要的位置上去。
    3.属性值:
  • left
  • right
  • top
  • bottom

3.绝对定位absolute:

绝对定位通过边偏移实现,它是完全脱标,完全不占有位置

  1. 相对于最近已定位的祖先元素进行定位
  2. 若父级元素一个都没有定位则以浏览器为准对齐

适用:
子元素相对于父元素的位置永远固定不变(二级弹出,图片轮播)

4.固定定位 fixed:

  1. 相对于浏览器窗口
  2. 脱离文档流

5.子绝父相:

  1. 因为子级是绝对定位,不会占有位置, 可以放到父盒子里面的任何一个地方。

  2. 父盒子布局时,需要占有位置,因此父亲只能是 相对定位.

6.定位相对于父盒子居中

left:50%;
margin-left:  px;
top:50%;
margin-top:  px;

7.定位后覆盖问题:

  1. 两个元素都设置了定位,html结构中后面的元素会覆盖前面的元素
  2. 子级元素永远覆盖父级元素,不可更改
  3. 改变兄弟级别覆盖顺序:z-index属性
    属性值越高,显示在越上层
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值