元素定位

position: static relative absolute fixed

  1. static 默认文档流中正常显示。
  2. relative(相对定位)
    标签首先显示在正常的文档流中,其他元素位置不受影响
    可以使用top,right,bottom,left,right这些定位属性,使这个标签相对于原来位置偏移显示。
  3. absolute(绝对定位)
    标签不显示在正常的文档流中
    使用top,right,bottom,left属性对元素定位
    默认情况下相对于浏览器定位。如果我们要它相对于父级元素定位的话,需要将父级元素设置成定位元素。
  4. 固定定位

绝对定位和相对定位区别:
6. position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)
7. position:absolute; 表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值